element ui upload上传文件到后台

前端代码:

页面代码

<!-- 上传视频对话框 -->
    <el-dialog :title="title" :visible.sync="uploadVideoOpen" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="90px" style="text-align:center">
        <el-upload 
          ref="uploadVideo"
          class="upload-demo"
          drag
          action=""
          :limit="10"
          :auto-upload="false"
          :on-change="uploadOnchange"
          :on-remove="uploadOnRemove"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">可以多文件上传</div>
        </el-upload>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormUpload">上 传</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

vue上传方法代码

/** upload on-change事件 */
uploadOnchange(file, fileList){
  this.videoFileList = fileList;
},

/** upload on-remove事件 */
uploadOnRemove(file, fileList){
  this.videoFileList = fileList;
},

/** 上传视频到后台 */
submitFormUpload(){
  const appUserId = this.uploadVideoUserId;
  const videoFiles = this.videoFileList;
  let formData = new FormData();
  for(let file of videoFiles) {
    formData.append("videoFiles", file.raw);
  }
  this.$modal.msgSuccess("上传中请耐心等待,可操作其他");
  uploadVideo(appUserId, formData).then(response => {
    this.$modal.msgSuccess("上传视频成功");
    this.uploadVideoUserId = null;
    // 清空上传file列表参数
    this.$refs.uploadVideo.clearFiles();
    this.uploadVideoOpen = false;
    this.getList();
   });
},

 后台代码:

/**
 * 上传视频
 */
@PostMapping("/uploadVideo/{appUserId}")
public AjaxResult uploadVideo(@PathVariable("appUserId") Long appUserId,
                              @RequestParam("videoFiles") MultipartFile[] videoFiles) {
    
    if (StringUtils.isNotEmpty(videoFiles)) {
        //遍历文件
        for (MultipartFile multipartFile : videoFiles) {
            if(!multipartFile.isEmpty()){
                try {
                    String fileName = multipartFile.getOriginalFilename();
                    fileName =  fileName.substring(0, fileName.lastIndexOf("."));
                    System.out.println("文件名:" + fileName);
                    Map<String, String> mapResult = MinioUtils.putObjectStreamMapResult(multipartFile, "yifan-video");

                } catch (Exception e) {
                    e.printStackTrace();
                    log.error("上传到minio失败", e);
                }
            }
        }
    }
    return AjaxResult.success();
}

 

posted @ 2022-07-18 12:01  xiexie0812  阅读(1100)  评论(3编辑  收藏  举报