ruoyi-vue实现文件上传

提示：

这篇博客主要介绍的是我个人在若依框架vue版中是用到的一个文件上此方法仅限若依框架使用，我没有在其他框架中使用过该方法传的方法，，所以大家在其他框架中能否成功我不确定，但是可以试试，如果好用欢迎留言告知，下面是代码介绍和效果展示：

一，在vue组建中定义上传弹出的弹出层：

                1、在html中：

                

<!-- 用户导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
  <el-upload
    ref="upload"
    :limit="1"
    accept=".zip"//文件类型
    :headers="upload.headers"
    :action="upload.url"//文件上传路径
    :disabled="upload.isUploading"
    :on-progress="handleFileUploadProgress"
    :on-success="handleFileSuccess"
    :auto-upload="false"
    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="upload.updateSupport"/>-->
      <!--            是否更新已经存在的用户数据-->
      <!--          </div>-->
      <span>仅允许导入zip格式文件。</span>
      <!--          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"-->
      <!--                   @click="importTemplate">下载模板-->
      <!--          </el-link>-->
    </div>
  </el-upload>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitFileExport">确 定</el-button>
    <el-button @click="upload.open = false">取 消</el-button>
  </div>
</el-dialog>

2.在data中定义上传所需的数据

// 用户导入参数
upload: {
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: {Authorization: "Bearer " + getToken()},
  // 上传的地址
  url: process.env.VUE_APP_BASE_API + "/business/talkrecord/importAllRecords"//文件上传路径
},

3method中定义需要的方法：

// 导出所有已经归档的谈话记录
importAllRecords() {
  this.upload.title = "导入归档的谈话记录";
  this.upload.open = true;

},

// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
  this.upload.isUploading = true;
},
/** 下载模板操作 */
importTemplate() {
  this.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`)
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
  if (response.msg) {
       // this.fullscreenLoading = false;
        // this.upload.open = false;
        this.$modal.msgSuccess("成功导入：" + response.listsize + "条数据！");
      } else {
       // this.fullscreenLoading = false;
        // this.upload.open = false;
        this.$modal.msgSuccess("失败:" + response.errormsg);
      }
  this.upload.open = false;
  this.upload.isUploading = false;
  this.$refs.upload.clearFiles();
  // this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
  this.getList();
},

//点击确定上传后调取submit方法请求后台响应//找的就是上面url中定义的方法路径

// // 上传的地址 url: process.env.VUE_APP_BASE_API + "/business/talkrecord/importAllRecords"//文件上传路径

submitFileExport() {
  this.$refs.upload.submit();
  this.fullscreenLoading = true;
},

二：后台controller

//导入全部数据
@PostMapping("/importAllRecords")
public Map<Object, String> importAllRecords(MultipartFile file) throws Exception {
    // 创建临时文件路径
    File temp = File.createTempFile("aaa.", ".zip");
    // 将前端提交的文件转存到临时路径中
    file.transferTo(temp);
    // 读取数据文件，并操作解析
    ObjectDataImport di = new ObjectDataImport(temp, "123456");
    // 删除临时文件
    temp.delete();

// 选择一个存储位置----------------------------------------------------------------------------
di.selectMap("zdthIntervieweeListReport");//上传的文件的名字

//接下来处理你需要上传的数据，此处根据自己的需要先获取到数据

然后从上面那个文件名的文件中获取到数据后 使用目标表的insert方法加入表中就行了

//         关闭导入对象
        di.close();
  
    完事，下面是演示：