关于elementui组件upload上传使用方法的坑

1.使用组件elementui
2.使用组件

<el-upload
   action=""                             ~~上传路径~~ 
   list-type="picture-card"              ~~文件列表类型~~ 
   :before-upload="beforePicUpload"      ~~上传文件之前的钩子函数，可以在这里对文件上传做限制~~ 
   :on-preview="handlePictureCardPreview"
   :limit="limit"                        ~~限制上传个数~~ 
   :auto-upload = "autoUpload"           ~~是否自动上传，默认为true~~ 
   :on-remove="handleRemove"
   :on-change="handChange">
 </el-upload>

3.上传步骤

1. 在on-change事件函数后面增加代码，也可以另外写一个方法，在on-change调用传入文件file,如图
2. 在uploadImgHeaders方法中写如下代码

 uploadImgHeaders(file){
        let formdata = new FormData();
        formdata.append('upfile',file.raw);  ****
        this.$http({
          method:"POST",
          url:"/api/v2/base/upload",
          data:formdata,
          headers: {
            "Content-Type": "multipart/form-data" ,
            "appid":200107,
            "Authorization":sessionStorage.getItem("Authorization")?sessionStorage.getItem("Authorization"):""
          },
          params:{
            type:31
          }
        }).then(res=>{
           if(res.data.code === 200){
              this.fileList.push(res.data.data.viewPath)
           }else{
             this.$message.error('图片上传失败');
           }
          console.log(res)
          console.log(this.fileList)
        })
      },

**注意：使用elementui组件上传文件是上传的组件中的raw文件，所以在append’的时候需要file.raw

5.传值成功，后端会返回一个预览路径，我们把他渲染出来就行啦