element上传多个视频/多个图片与限制数量

里面所用到的API接口替换成自己的

代码片

<template><div class=""><!-- 修改操作管理对话框 --><el-dialog :title="title" :visible.sync="open" width="500px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-form-item label="视频地址" prop="videoUrl"><el-upload list-type="picture-card" :class="{hideVideo:hideUploadEditVideo}" :action="uploadUrl"accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb' :auto-upload="false" ref="upload2" :limit='3':file-list="VideoList" :on-change="changeFile2"><i slot="default" class="el-icon-plus avatar-uploader-icon"></i><div slot="file" slot-scope="{file}"><video :src="file.url" width="100%" height="180" :controls="false">您的浏览器不支持视频播放</video><span class="el-upload-list__item-actions"><!-- 预览视频 --><span class="el-upload-list__item-preview" @click="handShowVideoUrlPreview(file)"><i class="el-icon-zoom-in"></i></span><!-- 移除视频 --><span class="el-upload-list__item-delete" @click="handleRemove2(file)"><i class="el-icon-delete"></i></span></span></div></el-upload></el-form-item><el-form-item label="图片地址" prop="imageUrl"><el-upload list-type="picture-card" :class="{hideImage:hideUploadEditImage}" :action="uploadUrl":auto-upload="false" :before-upload="beforeAvatarUpload" ref="upload3" :limit='3' :file-list="imageList":on-change="changeFile3"><i slot="default" class="el-icon-plus avatar-uploader-icon"></i><div slot="file" slot-scope="{file}"><img class="el-upload-list__item-thumbnail" :src="file.url" alt=""><span class="el-upload-list__item-actions"><!-- 移除图片 --><span class="el-upload-list__item-delete" @click="handleRemove3(file)"><i class="el-icon-delete"></i></span></span></div></el-upload></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog><!-- 视频预览 --><el-dialog :visible.sync="dialogVisibleVideo" title="预览" width="800" append-to-body:before-close="handleVideoClose"><video :src="showVideoUrl" width="100%" height="280" controls="controls">您的浏览器不支持视频播放</video></el-dialog></div>
</template><script>export default {name: "当前页面名字name",data() {return {open: false,  // 是否显示弹出层title: "", // 弹出层对话框标题// 表单参数form: {.....imageUrl: null,videoUrl: null},hideUploadEditVideo: false, //达到指定数量隐藏上传视频按钮hideUploadEditImage: false, //达到指定数量隐藏上传图片按钮showVideoUrl: '',  //打开预览对话框中video的src地址dialogVisibleVideo: false, // 视频预览对话框显示// 上传参数imageList: [], //图片路径数组VideoList: [], //视频路径数组uploadPath: '文件夹路径',uploadUrl: '文件上传到服务器地址',dialogImageUrl: '',dialogImage: false,fileList: [],};},created() {},methods: {// 上传图片时候判断类型beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';const isLt4M = file.size / 1024 / 1024 < 4;if (!isJPG) {this.msgError("上传图片只能是 JPG 格式!");}if (!isLt4M) {this.msgError("上传图片大小不能超过 2MB!");}return isJPG && isLt4M;},// 点击按钮上传图片changeFile3(file, fileList) {let fd = new FormData();let newArry = ''fd.append('file', file.raw);fd.append('path', this.uploadPath);fd.append('type', 'image');// uploadsingle是用户信息接口uploadsingle(fd).then(response => {if (response.data.code == 200) {this.form.imageUrl = response.data.data.path + response.data.data.filename;file.urlinfo = response.data.data.path + response.data.data.filename;this.imageList.push(file);// 上传数量达到3个后设置上传按钮样式隐藏this.hideUploadEditImage = this.imageList.length >= 3console.log(this.imageList)for (var i = 0; i < this.imageList.length; i++) {if (this.form.imageUrl == null || this.form.imageUrl == undefined) {this.form.imageUrl = "";}newArry += this.imageList[i].urlinfo + ",";this.form.imageUrl = newArry}this.form.imageUrl = this.form.imageUrl.substring(0, this.form.imageUrl.length - 1);} else {this.msgError(response.data.msg);}});},// 移除图片时候触发handleRemove3(file) {const parent = (this.$refs['upload3']).$children[0].$el;//查找indexlet index = 0;for (let i = 0, j = this.imageList.length; i < j; i++) {if (this.imageList[i].urlinfo == file.urlinfo) {index = i;break;}}parent.removeChild(parent.childNodes[index]);this.imageList.splice(index, 1);this.form.imageUrl = "";for (var i = 0; i < this.imageList.length; i++) {this.form.imageUrl += this.imageList[i].urlinfo + ",";}this.form.imageUrl = this.form.imageUrl.substring(0, this.form.imageUrl.length - 1);this.hideUploadEditImage = this.imageList.length >= 3},// 上传视频时候判断类型（上面代码块已加类型，所以这边没有用这个方法去判断）// beforeAvatarUploadVideo(file) {//     const isMp4 = file.raw.type == "video/mp4";//     const isLt40M = file.raw.size / 1024 / 1024 < 40;//     if (!isMp4) {//         this.msgError("上传视频只能是 mp4 格式!");//     }//     if (!isLt40M) {//         this.msgError("上传视频大小不能超过 40MB!");//     }//     return isMp4 && isLt40M;// },// 点击按钮视频上传后changeFile2(file, fileList) {let fd = new FormData();let newArryVideo = ''fd.append('file', file.raw);fd.append('path', this.uploadPath);fd.append('type', 'video');// uploadsingle是用户信息接口uploadsingle(fd).then(response => {if (response.data.code == 200) {this.form.videoUrl = response.data.data.path + response.data.data.filename;file.urlinfo = response.data.data.path + response.data.data.filename;this.VideoList.push(file);// 上传数量达到3个后设置上传按钮样式隐藏this.hideUploadEditVideo = this.VideoList.length >= 3console.log(this.VideoList)for (var i = 0; i < this.VideoList.length; i++) {if (this.form.videoUrl == null || this.form.videoUrl == undefined) {this.form.videoUrl = "";}newArryVideo += this.VideoList[i].urlinfo + ",";this.form.videoUrl = newArryVideo}this.form.videoUrl = this.form.videoUrl.substring(0, this.form.videoUrl.length - 1);} else {this.msgError(response.data.msg);}});},// 移除视频handleRemove2(file) {const parent = (this.$refs['upload2']).$children[0].$el;//查找indexlet index = 0;for (let i = 0, j = this.VideoList.length; i < j; i++) {if (this.VideoList[i].urlinfo == file.urlinfo) {index = i;break;}}parent.removeChild(parent.childNodes[index]);this.VideoList.splice(index, 1);this.form.videoUrl = "";for (var i = 0; i < this.VideoList.length; i++) {this.form.videoUrl += this.VideoList[i].urlinfo + ",";}this.form.videoUrl = this.form.videoUrl.substring(0, this.form.videoUrl.length - 1);this.hideUploadEditVideo = this.VideoList.length >= 3},// 预览视频handShowVideoUrlPreview(file) {this.dialogVisibleVideo = truethis.showVideoUrl = file.url},// 关闭视频handleVideoClose() {this.dialogVisibleVideo = falsethis.showVideoUrl = ''},// 不管是新增该是修改操作都需要重置data里面配置的imageList和VideoList值为空/** 新增按钮操作 */handleAdd() {this.open = true;this.imageList = []this.VideoList = []this.title = "管理";},/** 修改按钮操作 */handleUpdate(row) {this.imageList = []this.VideoList = []//列表视频if (row.videoUrl == "") {this.VideoList = []} else {var video = row.videoUrl.split(",");for (var i = 0; i < video.length; i++) {this.VideoList.push({url: "上传服务器的地址" + video[i],urlinfo: video[i]})}}//列表图if (row.imageUrl == "") {this.imageList = []} else {var image = row.imageUrl.split(",");for (var i = 0; i < image.length; i++) {this.imageList.push({url: "上传服务器的地址" + image[i],urlinfo: image[i]})}}},}};
</script><style>
.hideVideo .el-upload--picture-card {display: none;
}
.hideImage .el-upload--picture-card {display: none;
}
</style>

点击确定触发提交接口API（提交form）。

element上传多个视频/多个图片与限制数量相关推荐

VUE+element 上传视频
VUE+element上传视频效果展示 html部分 <el-form-item label="视频上传" prop="storageurl">& ...
七牛云分片批量上传大文件视频
原本用的element上传组件,结果发现大视频总是失败,还跑出outMemoryError :java heap space 内存溢出,排查:jvm内存默认256m,每次文件上传,用的是muiltip ...
腾讯视频下载转mp4_腾讯视频如何上传自己的视频
今天小编给广大用户分享腾讯视频下载转mp4_腾讯视频如何上传自己的视频.现在小视频.Vlog正发展地如火如荼,这是一个人人都能做自媒体,人人都能输出内容的时代,腾讯视频也是其中的一个平台.这篇经验就来 ...
腾讯视频怎么上传自己的视频？
腾讯视频,是定坐落于中国最大视频在线网络媒体,另外也是一款视频播放器.其以丰富多彩的內容.完美的收看感受.方便快捷的登陆方法.二十四小时多服务平台无缝拼接运用感受及其便捷共享的产品特性,满足客户需求在 ...
腾讯视频下载安装免费装到手机_腾讯视频怎么上传个人本地视频
不管这个腾讯视频好用与否,都有一大批用户,本文播放器家园网小编分享腾讯视频下载安装免费装到手机_腾讯视频怎么上传个人本地视频.VIP会员频道聚合海量VIP品质内容,连续签到解锁惊喜奖励.摇一摇抽VIP ...
vue上传大文件/视频前后端（java）代码
vue上传大文件/视频前后端(java)代码一.上传组件二.后端java代码注意: 一.上传组件 <template><div>&l ...
ali-oss配合element上传130M以上的文件，浏览器直接崩溃，有大神知道是什么情况么
ali-oss配合element上传130M以上的文件,浏览器直接崩溃,有大神知道是什么情况么
预计每天全世界上传的短视频超过4亿条
我是卢松松,点点上面的头像,欢迎关注我哦! 今天写的不是新闻,是对我做短视频这一年以来的感悟: 2017年的时候看新闻报道,每天就有2000万条短视频了,现在据@梁博透露:现在应该每天上传的短视频有8 ...
【历史上的今天】4 月 23 日：YouTube 上传第一个视频；数字音频播放器的发明者出生
整理 | 王启隆透过「历史上的今天」,从过去看未来,从现在亦可以改变未来. 今天是 2023 年 4 月 23 日,世界读书日.在 1564 年的这一天,全世界最卓越的文学家之一莎士比亚出生:161 ...
【Fastapi】批量上传文件（文档、图片、视频等）
[Fastapi]批量上传文件项目演示功能说明编程思路重要知识点分析源代码项目演示 [Fastapi]批量上传文件(文档.图片.视频等) https://www.bilibili.com/ ...

element上传多个视频/多个图片与限制数量

element上传多个视频/多个图片与限制数量

element上传多个视频/多个图片与限制数量相关推荐

最新文章

热门文章