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"  style="display:none;">

 js部分

写在methods 方法中

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

后端接口

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