java + element-ui 上传多个文件

前端
      <el-upload ref="performanceUpload" accept=".xlsx, .xls" :headers="performanceUpload.headers"
                 :action="performanceUpload.url + '?updateSupport=' + performanceUpload.updateSupport"
                 :disabled="performanceUpload.isUploading" :on-progress="handleFileUploadProgressPerformance"
                 :on-success="handleFileSuccessPerformance" :auto-upload="false" :multiple="true" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="performanceUpload.updateSupport"/>
            是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
        </div>
      </el-upload>

js

      <el-upload
        ref="upload"
        accept=".docx, .doc"
        :headers="upload.headers"
        :action="upload.url"
        :http-request="HttpUploadFile"
        :disabled="upload.isUploading"
        :data="getfileData()"
        :on-change="handleChange"
        :on-remove="handleRemove"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        :multiple="true" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入.docx, .doc格式文件。</span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </div>
// 参数
      upload: {
        // 是否显示弹出层(用户导入)
        open: false,
        // 弹出层标题(用户导入)
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/duty/report/importData',
        fileList: []
      },
    // 提交上传文件
    submitFileForm() {
      //判断是否有文件再上传
      if (this.upload.fileList.length === 0) {
        return this.$message.warning('请选取文件后再上传')
      }
      if (this.upload.fileList.length > 0) {
        //创建FormData对象,用于携带数据传递到后端
        this.fileData = new FormData()
        this.$refs.upload.submit();
        this.fileData.append("data", JSON.stringify(this.form));
        this.fileData.append("headers", { Authorization: "Bearer " + getToken() });
        this.fileData.append("withCredentials",false)
        this.fileData.append("filename", "file");
        var i = this.upload.fileList.length
        if (i !== 0) {
          //此处执行调用发送请求
          exportFiles(this.fileData).then((res) =>{
            if(res.code === 200) {
              this.upload.isUploading = false;
              this.upload.fileList = [];
              this.upload.open = false;
              this.$refs.upload.clearFiles();
              this.$modal.msgSuccess(res.msg);
              this.getReportDutyList(this.selectVal);
              this.getPersonnelInfo(this.selectVal);
            } else {
              this.$message({
                message: "失败",
                type: 'error'
              })
            }
          })
        } else {
          //如果没有文件要上传在此处写逻辑
        }
      } 
    },

后端 controller

@PostMapping("/importDataFiles")
    public AjaxResult importDataFiles(MultipartFile[] files) throws Exception {
        if (CollectionUtils.isEmpty(Arrays.asList(files))) {
            return AjaxResult.error("上传文件为空!");
        } else {
            for (MultipartFile file : files) {
                InputStream inputStream = file.getInputStream();
                List<WordTableVO> wordTableVOS = new ArrayList<>();
                if (WordUtils.isDocOrDocx(file.getOriginalFilename())) {
                    wordTableVOS = WordUtils.getTableFromDoc(inputStream);
                } else {
                    wordTableVOS = WordUtils.getTableFromDocx(inputStream);
                }
                ReportDutyExportEntity result = WordUtils.processWordData(wordTableVOS);
                // 获取登录人员信息
                String userName = getUsername();
                // 添加导入数据信息
                int insertResult = scoreService.insertScore(result, userName);
                if (insertResult == 0) {
                    return AjaxResult.error("导入失败!");
                }
            }
            return AjaxResult.success("导入成功!");
        }

    }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值