<el-upload class="avatar-uploader" id="avatar-uploader"
:headers="videoUpload.headers"
:drag="videoUpload.Plus"
:action="videoUpload.uploadUrl"
multiple :show-file-list="false"
:on-success="handleVideoSuccess"
:before-upload="beforeUploadVideo"
:on-progress="uploadVideoProcess"
:disabled="videoUpload.isDisabled">
<i v-if="videoUpload.Plus" class="el-icon-upload"></i>
<div v-if="videoUpload.Plus" class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
</div>
<el-progress v-if="videoFlag == true" type="circle"
:percentage="videoUpload.videoUploadPercent"
style="margin-top: 30px"></el-progress>
<div class="el-upload__tip" slot="tip" v-if="videoUpload.Plus">
只能上传mp4/flv/avi文件，且不超过5000M
</div>
//自己写了一个关闭按钮
<button v-if="videoUpload.videoForm.videoUrl !== ''" id="closeBtn"
@click.prevent.stop="handleRemove1">关闭</button>
<div class="avatar-icon-box" v-if="videoUpload.videoForm.videoUrl !== ''">
<img v-if="form.lzglXcglXcwtsp == ''" class="avatar-icon imgess"
style="align-items: center; vertical-align: middle" />
<video v-else-if="form.lzglXcglXcwtsp !== ''"
v-bind:src="form.lzglXcglXcwtsp" class="video-avatar"
:autoplay="false" controls="controls" muted></video>
</div>
</el-upload>
const videoUpload = reactive({
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
uploadUrl: import.meta.env.VITE_APP_BASE_API + "服务器地址",
videoFlag: false,
Plus: true,
isDisabled: false,
//上传视频时带的参数，这个地址就是后端保存磁盘的地址。可以更改。
//视频部分
videoForm: {
videoId: '',
videoUrl: '',
videoUrl1: ''
},
videoUploadPercent: 0
})
// 视频上传前执行
function beforeUploadVideo(file) {
//文件大小
const isLt300M = file.size / 1024 / 1024 < 5000
//视频后缀检查
if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) === -1) {
proxy.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>请上传正确的视频格式</div>", { dangerouslyUseHTMLString: true });
return false
}
if (!isLt300M) {
proxy.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>上传视频大小不能超过5000MB哦</div>", { dangerouslyUseHTMLString: true });
return false
}
}
// 视频上传过程中执行
function uploadVideoProcess(event, file, fileList) {
//videoUpload.Plus = false
videoUpload.videoFlag = true
videoUpload.videoUploadPercent = + file.percentage.toFixed(0)
//console.log(file);
}
// 视频上传成功是执行
function handleVideoSuccess(res, file) {
//videoUpload.Plus = false
videoUpload.videoUploadPercent = 100
// 如果为200代表视频保存成功
if (res.resCode === '200') {
// 接收视频传回来的名称和保存地址
// 至于怎么使用看你啦~
videoUpload.videoForm.videoId = res.newVidoeName
videoUpload.videoForm.videoUrl = res.VideoUrl
form.value.lzglXcglXcwtsp = res.VideoUrl
} else {
//this.message.error('视频上传失败，请重新上传！')
proxy.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>视频上传失败，请重新上传!</div>", { dangerouslyUseHTMLString: true });
}
}
function handleRemove1() {
videoUpload.isDisabled = true
proxy.modal.confirm("确定移除视频？").then(function () {
loading.value = true;
}).then(() => {
form.value.lzglXcglXcwtsp = ''
videoUpload.videoForm.videoUrl = ''
videoUpload.isDisabled = false
proxy.modal.msgSuccess("移除成功");
}).catch(() => {
}).finally(() => {
loading.value = false;
});
}
.video-avatar {
width: 400px;
height: 250px;
}
.el-icon-circle-close {
margin-right: 5%;
color: #0c25e0;
font-size: 22px;
}
#closeBtn {
margin-top: 3%;
margin-left: 85%;
background-color: red;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
/**
* 上传视频
*/
@PostMapping("/upload")
@ResponseBody
//Map<String,String>: map是键值对形式组成的集合，类似前端的数组但是里面是键值对形式的，前后两个string代表键和值都是字符串格式的。
//post请求传入的参数：MultipartFile file(理解为springmvc框架给我们提供的工具类，代表视频流数据)，SavePath(前台传来的地址路径，也是用来后端保存在服务器哪个文件夹的地址)
public Map<String, String> savaVideoTest(@RequestParam("file") MultipartFile file)
//throws IllegalStateException写在方法的前面是可以抛出异常状态的，如果有错误会把错误信息发出来对应下面的try和catch
throws IllegalStateException
{
//new一个map集合出来
Map<String, String> resultMap = new HashMap<>();
try
{
log.info("保存开始！");
//获取文件后缀，因此此后端代码可接收一切文件，上传格式前端限定
String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1).toLowerCase();
// 重构文件名称
//System.out.println("文件保存路径" + SavePath);
//UUID(全局唯一标识符)randomUUID(随机生成标识符)toString(转成字符串)replaceAll(替换字符方法，因为随机生成的里面包括了 - ，这里意思是把 - 全部换成空)
String pikId = UUID.randomUUID().toString().replaceAll("-", "");
//视频名字拼接：唯一标识符加上点，再加上上面的视频后缀也就是MP4之类的。就组成了现在的视频名字，比如这样：c7bbc1f9664947a287d35dd7cdc48a95.mp4
String newVideoName = pikId + "." + fileExt;
System.out.println("重构文件名防止上传同名文件：" + newVideoName);
//保存视频的原始名字
String videoNameText = file.getOriginalFilename();
System.out.println("视频原名:" + videoNameText);
// 上传文件路径
String filePath = RuoYiConfig.getUploadPath();
String pathFileName = getPathFileName(filePath, newVideoName);
String url = serverConfig.getUrl()+pathFileName;
//判断SavePath这个路径也就是需要保存视频的文件夹是否存在
File filepath = new File(filePath, file.getOriginalFilename());
if (!filepath.getParentFile().exists())
{
//如果不存在，就创建一个这个路径的文件夹。
filepath.getParentFile().mkdirs();
}
//保存视频：把视频按照前端传来的地址保存进去，还有视频的名字用唯一标识符显示，需要其他的名字可改这
File fileSave = new File(filePath, newVideoName);
//下载视频到文件夹中
file.transferTo(fileSave);
//构造Map将视频信息返回给前端
//视频名称重构后的名称：这里put代表添加进map集合内，和前端的push一样。括号内是前面字符串是键，后面是值
resultMap.put("newVideoName", newVideoName);
//正确保存视频成功，则设置返回码为200
resultMap.put("resCode", "200");
//返回视频保存路径
resultMap.put("VideoUrl", url);
//到这里全部保存好了，把整个map集合返给前端
log.info("保存成功！");
return resultMap;
}
catch (Exception e)
{
//在命令行打印异常信息在程序中出错的位置及原因
e.printStackTrace();
//返回有关异常的详细描述性消息。
e.getMessage();
//保存视频错误则设置返回码为400
resultMap.put("resCode", "400");
//这时候错误了，map里面就添加了错误的状态码400并返回给前端看
return resultMap;
}
}
private static final String getPathFileName(String uploadDir, String fileName) throws IOException
{
int dirLastIndex = RuoYiConfig.getProfile().length() + 1;
String currentDir = StringUtils.substring(uploadDir, dirLastIndex);
String pathFileName = Constants.RESOURCE_PREFIX + "/" + currentDir + "/" + fileName;
return pathFileName;
}
将组件放在你所需要的地方即可
powered by kaifamiao