vue实现文件上传

FormData异步上传文件

第一步: 创建一个隐藏的文件域

第二步: 一般我们都会把头像存到vuex中,方便复用 

 state: {
    userInfo: {}
  },
  mutations: {
    aaa(state, newPhoto) {
      state.userInfo.photo = newPhoto
    },
}
actions:{
 async updateUserPhoto (context, fd) {
      console.log(context) // store.commit
      try {
        const res = await xxxxxxapi(fd)
        console.log('updateUserPhoto', res)
        context.commit('aaa', res.data.data.photo)
      } catch (error) {
        console.log(error)
        throw new Error(error)
      }
    },
}

 第三步: 准备工作完成了,接下来做功能

 async hFileChange (e) {
      const file = e.target.files[0]
      if (!file) {
        // 如果用户没有选择图片,只是点了文件上传这个按钮
        return
      }
      const fd = new FormData()  //创建FormData对象,
//这个photo是vuex中的,append第一个参数是规定要插入的内容,必传参数,fd.append是将文件转成文件流的格式传给后端
      fd.append('photo', file)   
      console.log(fd) // FormDate空对象
      try {
        await this.$store.dispatch('user/updateUserPhoto', fd)
        this.$toast.success('上传成功')
      } catch (err) {
        console.log(err)
        this.$toast.success('操作失败')
      }
    }

这个e代表啥呢,打印一下子: 这时我们发现e.target.file[0] 正好是我们上传的那张图片地址

最后我们需要把文本域隐藏掉,

 hClickImage () {
      this.$refs.file.click()
    }

这样,我们点击头像这一栏,间接相当于点击了上传文本域,从而实现头像上传 功能