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
    })
}

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值