首先呢,我的需求是用Excel表做数据导入,前端传入文件,后端拿到文件解析,然后插入数据库,由于对vue不熟悉,踩了很多的坑,最后还是做完了,这里分享一下我踩过的坑。
直接贴代码吧:
<!--文件导入-->
    <template>
      <div>
        <el-upload
          class="filter-item"
          name="file"
          action="string"
          :on-error="uploadFalse"
          :on-success="uploadSuccess"
          :before-upload="beforeAvatarUpload"
          :limit="1"
          ref="upload"
          accept=".xlsx,.xls"
          :show-file-list="false"
          :file-list="fileList"
          :http-request="uploadFile"
        >
          <el-button  style="margin-left: 10px;" icon="el-icon-edit" type="primary" v-has-perm="">商品上架</el-button>
        </el-upload>
      </div>
    </template>

最初,我在action里直接添加了后台的API地址,但是拿不到file文件。
然后去查了很多帖子,把目光转到 :http-request="uploadFile"这个属性上面,
在这里插入图片描述
在这里插入图片描述

action给了一个string值,http-request属性覆盖默认的上传行为,可以自定义上传的实现,从param.file可以直接拿到上传的file文件,拿到文件才能去传输,upload方法:

    async uploadFile(param){
      const File = param.file;
      let formData1 = new FormData();
      formData1.append("file", File);
      await obj.ExcelInsertGoodinStore(formData1);
      this.findPage();
    },

ExcelInsertGoodinStore方法:你可以有自己的写法

ExcelInsertGoodinStore(entity){
    return axios.post(`good/ExcelInsertGoodinStore`,entity)
  }

其他的钩子函数:
上传成功,上传失败,以及上传校验
在这里插入图片描述

 async uploadSuccess(response, file, fileList) {
      console.log(response)
      if (response.status==20000) {
        this.$message({
          message: response.message,
          type: 'success'
        });
      } else {
        this.$message({
          message: response.message,
          type: 'error'
        });
      }
    },
    uploadFalse(response, file, fileList) {
      this.$message({
        message: '文件上传失败!',
        type: 'error'
      });
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload(file) {
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!extension && !extension2) {
        this.$message({
          message: '上传模板只能是 xls、xlsx格式!',
          type: 'error'
        });
      }
      if (!isLt2M) {
        console.log("上传模板大小不能超过 10MB!");
        this.$message({
          message: '上传模板大小不能超过 10MB!',
          type: 'error'
        });
      }
      return extension || extension2 || extension3 || (extension4 && isLt2M);
    },

后台代码:
很多帖子里会说name方法要与后台接收的参数一致,我一直都写一致的,所以也没发现报错,name=“file” 和后台接收写一致就好了,接收我是用MultipartFile 直接接收,怎么解析(这里就不写了),解析也有很多帖子

 /**
     * 商品批量导入功能
     */
    @RequestMapping(value = "/ExcelInsertGoodinStore", method = RequestMethod.POST)
    @ResponseBody
    public AxiosResult importGood(@RequestParam("file") MultipartFile file) {
        BaseGoodService.GoodImport(file);
        return AxiosResult.success(AxiosStatus.OK);
    }

这样基本上就可以了,至于你要保存文件到什么地方,还是做文件解析,根据需求来吧。
在这里插入图片描述

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐