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
    评论
`el-upload` 是 `ElementUI` 组件库中的一个组件,用于实现文件上传功能。它支持多文件上传、拖拽上传等功能,使用起来非常方便。以下是一个简单的示例: ```html <template> <div> <el-upload action="/api/upload" :data="{token: 'xxxxx'}" :on-success="handleSuccess" :on-error="handleError" :multiple="true" :limit="3" :accept="'image/*'" ref="upload" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过3个文件</div> </el-upload> </div> </template> <script> export default { methods: { handleSuccess(response, file, fileList) { console.log(response) console.log(file) console.log(fileList) }, handleError(error, file, fileList) { console.log(error) console.log(file) console.log(fileList) } } } </script> ``` 上面的代码中,我们将 `el-upload` 组件的 `action` 属性设置为上传文件的后端接口地址,`data` 属性设置为上传时需要携带的参数,`on-success` 和 `on-error` 属性分别绑定了上传成功和上传失败的回调函数。`multiple` 属性表示是否支持多文件上传,`limit` 属性表示最多上传的文件数,`accept` 属性表示接受的文件类型。我们还使用了 `ref` 属性来获取到 `el-upload` 组件的引用,方便在其他方法中操作上传组件。 在上面的示例中,我们定义了 `handleSuccess` 和 `handleError` 两个方法来处理上传成功和上传失败的情况。在上传成功时,我们可以通过 `response` 参数获取到服务器返回的数据,`file` 参数表示当前上传的文件,`fileList` 参数表示当前已经上传的文件列表。在上传失败时,我们可以通过 `error` 参数获取到错误信息。 需要注意的是,以上示例只是前端实现上传文件的功能,你还需要在后端编写相应的代码来处理上传请求,将上传的文件保存到服务器上。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值