上传头像,后台接口需要文件对象格式,方法分享

接口代码如下

// 修改头像
const updatePhotoAPI = (form) => {
  return request({
    url: '/v1_0/user/photo',
    method: 'PATCH',
    data: form
    // 如果你的请求体内容是表单对象, 浏览器会自动携带请求头Content-Type为multipart/form-data
  })
}

这是调用图片下边还有代码

 代码如下

    // <input @change="FileFn" type="file"> 标签简写了
    // 导入请求参数为表单对象的接口 updatePhotoAPI
    async FileFn (e) {
      const { name, size } = e.target.files[0]
      const reg = /\.(png|jpe?g|gif|svg|webp)$/ // 正则以什么结尾
      if (!reg.test(name)) {
        Toast.fail('请选择图片!')
        return
      }
      if (size / 1024 / 1024 > 2) { // 上传头像不能超过2M
        Toast.fail('上传的图片不能超过2M')
        return
      }
      const from = new FormData() // 创建表单对象
      from.append('photo', e.target.files[0]) // 给表单添加后台设定的字段
      // console.log(from.getAll('photo')) // 获取所有
      // console.log(...from) // 解构出来
      // console.log(from.get('photo')) // 获取第一个
      const res = await updatePhotoAPI(from) // 调用接口
      this.profileObj.photo = res.data.photo // 返回值赋值给头像
      Toast.success('上传成功')
    }