Vue Element-ui上传图片踩坑

Element-ui上传图片踩坑

使用Element-ui组件上传图片时，使用自带的action发起上传请求时碰到400错误

错误代码

<el-upload
          class="upload-demo"
          action="http://localhost:8080/create/uploadAvatar"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
          list-type="picture"
          :before-upload="beforeUpload"  //上传之前执行
           :data="dataForm"   //上传时额外带的参数，注意是额外
          name="avatar"   //一看是不知道这个就是文件参数名称
          :headers="headers"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>

methods: {
    	handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          handlePreview(file) {
            this.$message.warning(`,,,,,`);
            console.log(file);
          },
          handleExceed(files, fileList) {
            this.$message.warning(`最多选择一张图片`);
          },
          beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
          },
          beforeUpload(file) {
              //全部是多余操作，根本不用写这个函数
             /*this.headers = {
              "Content-Type": 'multipart/form-data'
            } 
              
              this.avatarParamBody = {
                  avatar: file,
              };
              console.log(this.avatarParamBody);
              console.log(this.headers);*/
      }

1.上传时，服务端没有接受到对应名称的参数。

弄了很久都没有解决，我就想着怎么就接受不到avatar作为文件参数名。

后来查了很多帖子才知道，有一个name属性对应的就是参数名，直接在组件里面写个name=“avatar”就可以，完全不用自己加参数。

2.第一次上传成功，第二次报错

原来这个发起上传请求会自动给加上清求头"Content-Type": 'multipart/form-data'

我在beforeUpload中加入了请求头，第一次没问题，但第二次就写了连个Content-Type参数，导致后端报错。

这么一来before-upload的函数就是多余的！！！除非有需要