使用elementUI的upLoad组件,不上传,只获取选择的文件,以文件的方式传给后端

本文介绍了如何在Vue应用中使用`axios`和`FormData`处理文件上传,具体步骤包括选择文件、构造请求头并发送到后端接口进行Excel导入。
摘要由CSDN通过智能技术生成
<el-upload ref="upload" class="upload-demo" style="display: inline-block" accept=".xlsx,.xls" :auto-upload="true" :show-file-list="false" :before-upload="handleBeforeUpload">
   <el-button type="primary" plain style="margin: 0 10px">excel导入</el-button>
</el-upload>
// 上传前loading加载
handleBeforeUpload(file) {
  // 获取当前选中的文件
  var File = file;
  // 1 需要先利用FomData内置对象
  let formDataObj = new FormData();
  formDataObj.append("file", File);
  console.log("导出:", formDataObj);
  axios({
    method: "post",
    url: process.env.VUE_APP_BASE_API + "/pop/import", //此处为往后台发送请求的地址
    data: formDataObj,
    headers: {
      "Content-Type": "multipart/form-data",
    },
    params: {
      sysCityCode: "370100000000",
      sysCountyCode: "",
    },
  }).then((res) => {
   //成功
  });
  return false;//选择了文件,先不上传
},
使用 ElementUI 传递 MultipartFile 给后端,你需要使用 `<el-upload>` 组件。以下是一个示例: ```html <template> <el-upload class="upload-demo" action="/api/upload" :headers="{ Authorization: token }" :auto-upload="false" :on-change="handleChange" :file-list="fileList" multiple> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </template> <script> export default { data() { return { fileList: [], token: 'your_token_here' // 替换为你的后端需要的token值 }; }, methods: { handleChange(file, fileList) { // 上传文件前的处理 // 每个文件上传前都会执行这个方法 // 这里可以对文件进行处理,如压缩、裁剪等 } } }; </script> ``` 在上述示例中,`<el-upload>` 组件的 `action` 属性指定了后端接口地址,`headers` 属性指定了需要传递给后端的请求头部信息,`auto-upload` 属性设置为 `false` 表示需要手动触发上传,`on-change` 属性指定了上传前的处理方法,`file-list` 属性用于绑定已选择文件列表,`multiple` 属性表示可以选择多个文件。 在上传前,你可以在 `handleChange` 方法中对文件进行处理,例如压缩、裁剪等。最后,在上传按钮被点击时,调用 `this.$refs.upload.submit()` 方法来上传文件。 在后端接收上传文件时,你需要使用 MultipartFile 类型的参数来接收。具体实现方式可能因后端框架而异,但通常你需要在接口中添加 `@RequestParam("file") MultipartFile file` 参数来接收上传文件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值