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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 我与微信审核的“相爱相杀”看个人小程序副业
· DeepSeek “源神”启动!「GitHub 热点速览」
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库