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(); }
欢迎一起来学习和指导,谢谢关注!
本文来自博客园,作者:xiexie0812,转载请注明原文链接:https://www.cnblogs.com/mask-xiexie/p/16489961.html