Vue-el-upload 实现文件上传至后台

html部分

<el-button type="primary" plain @click="uploadFile2()" style="float:right;" icon="el-icon-upload">点击上传</el-button>
<input type="file" @change="fileValueChange2()" ref="uploadFile2" enctype="multipart/form-data" id="import_btn" style="display:none;">

 js部分

写在methods 方法中

uploadFile2(){
      // 当点击button按钮后会触发此事件
      // 作用就是打开文件上传弹框
      this.$refs.uploadFile2.click()
    },
    fileValueChange2(){
    // 选中文件后，会触发input的change事件，即会进入此函数
      var formData = new FormData()
      // this.$refs.uploadFile2是vue中获取dom元素的方法
      // 通过files就可以拿到所有上传的文件，如果是多个文件循环即可
      formData.append( 'file',this.$refs.uploadFile2.files[0])
      // 必须设置请求类型
      //formData.append( 'type', "Blob");
      // 如果需要传id的情况下，参考下面代码
      //formData.append( 'id', this.id);
      // 配置完成后，只需要向后台传入formData 变量即可  
      //multiple=”multiple  多文件可选
      // for(let i=0;i<deviceFile.length;i++){
      //     formData.append('file', deviceFile[i]);
      //   }
      let file =formData;
      this.loading=true
      //调用接口上传到后台
      接口名称(file).then(res=>{
        if (res.data.status == 10000) {
          this.$message.success('success');
          //清空value值  解决无法上传相同名字文件的问题
          document.getElementById("import_btn").value = "";
        }
        }).catch((e) => {
            this.$message.error("excel上传失败，请重新上传");
            document.getElementById("import_btn").value = "";
        })
    },

后端接口

let prefix = "/itam_sales"
export const 接口名称 = (data) => {
    return axios({
        url: `/itam_sales/地址`,
        method: 'post',
        type: Blob,
        data
    })
}