前端如何上传图片给后台？如何传递 multipart/form-data 类型的数据？图片大小、格式检查?-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端如何上传图片给后台？如何传递 multipart/form-data 类型的数据？图片大小、格式检查?。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 如何上传图片？

图片上传需要传二进制流，请求头的 content-type 类型需为 multipart/form-data，传递的格式如下图所示

如何将上传图片文件传给后端,前端

前后端交互通常为：

先调用接口上传二进制流图片
然后再上传表单其他内容（第一步通常会返回后台存储的图片id，第二步会将图片id传递给后台）

注：目前我只用过以上这种方法，我能想到的另一种方法是表单及其图片都用 multipart/form-data 格式传递过去，但我和后台目前没用过这种方法

2. 如何传递 multipart/form-data 类型的数据？

方法 1：显式的设置 content-type：multipart/form-data；（没直接用这个是由于工作的项目封装了 http 方法，不支持我直接设置）
方法 2： new formData()，使用 for 遍历对象，调用 formDataObj.append() 方法添加键值对；（此处可在 http 公共函数直接新增一个这样的方法，避免每次都需要写）

var formData = new FormData()
  for (var key in data) {
    formData.append(key, data[key])
  }
return formData

方法 3： axios 自带 transformRequest 方法，在发送请求前对 data 做预处理，transformRequest接受一个数组，第二个函数将处理上一个函数的结果。类似的函数还有 transformResponse 。

axios.create({
  transformRequest: [function (data, headers) {
    if (data instanceof Object) {
      const formData = new FormData();
      for (const key in data) {
        formData.append(key, data[key]);
      }
      return formData;
    }
    return data;
  }],
});

3. 图片大小、格式检查

onUploadChange(file){
  const isLt20M = file.size / 1024 / 1024 < 20
  const extension = file.name.split('.').pop().toLowerCase()
  if (!isLt20M) {
    this.$newMessage.error('图片大小不能超过20MB')
    return
  }
  if (!(['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(extension))) {
    this.$newMessage.error('只接受图片类型的文件')
    return false
  }
  const imageSrc = URL.createObjectURL(file.raw)
  this.dataForm.popPic = file.raw
}