vue v-for 文件上传 + 普通文件上传

内容xml

             <input
                alt="推荐产品图片"
                type="file"
                class="upload"
                @change="addImg(index)"
                ref="file"
                multiple
                accept="image/png, image/jpeg, image/gif, image/jpg"
              />

方法处理

    addImg(index) {
      console.log(index);
      let _this = this;
      let files = this.$refs.file[index].files[0];  //上传的file文件 通过$refs获取
      let formData = new FormData();
      formData.append("files", files);
      if (files.size > 1024 * 1024) {
        this.Toast("上传图片不能大于1M");
        return false;
      }
      uploadFileApi(formData).then(res => {
        Toast.clear();
        console.log(index);
        _this.myproduct.lists[index].demandImage = res;
      });
    },

普通文件上传

      <input
                alt="推荐产品图片"
                type="file"
                class="upload"
                @change="addImg"
                ref="file"
                multiple
                accept="image/png, image/jpeg, image/gif, image/jpg"
              />
   addImg(file) {
      console.log(file);
      let _this = this;
      let files = file.files[0];  //上传的file文件 通过$refs获取
      let formData = new FormData();
      formData.append("files", files);
      if (files.size > 1024 * 1024) {
        this.Toast("上传图片不能大于1M");
        return false;
      }
      uploadFileApi(formData).then(res => {
        Toast.clear();
        console.log(index);
        将返回数据定义到data里
      });
    },

注意事项

1. 上传图片不成功

检查请求头类型 ‘Content-Type’: ‘multipart/form-data’

2. 检查数据是否添加

console.log(formData) 为空对象 这是正常现象 可通过 formData.get(‘files’)检查