el-upload组件如何上传blob格式的url地址视频
- 一、存在问题
- 二、直接上代码
需求:想把视频地址url:“blob:http://localhost:8083/65bd3c0f-52ec-4844-b85e-06fdb5095b7b”,通过el-upload组件上传
el-upload是Element UI中用于文件上传的组件,通常用于上传本地文件。如果需要上传url地址而不是本地文件也是可以的,需要自己封装一下
一、存在问题
正常el-upload上传本地文件参数是
如果把 Blob 转换为 File就可以上传了
二、直接上代码
//点击保存上传视频
saveRecording() {
//创建了 Blob 对象并将其添加到 FormData 中
const blob = new Blob([this.videoUrl], { type: 'text/plain' });
const formData = new FormData();
formData.append('file', blob);
formData.append('fileType', 5);//加一个额外参数
const headers = {
token: this.$store.state.token,
};
console.log(headers, 'header');
fetch(process.env.VUE_APP_WEB_API + `/上传接口`, {
method: 'POST',
headers,
body: formData,
})
.then(res => {
return res.json(); // Assuming response is JSON format
})
.then(({ data }) => {
if (data.url) {
this.$message({
type: 'success',
message: '添加成功!',
showClose: true,
offset: 80,
});
this.videoData = data;
this.videoName = data.fileName;
this.sizeTime = `文件大小:${
this.returnSize(this.videoData.fileSize) || 0
}`;
// var elevideo = document.getElementById("videoPlay");
// elevideo.addEventListener("loadedmetadata", function () {
// //加载数据
// const duration = elevideo.duration;
// console.log(duration,'duration');
// //视频的总长度
// const minutes = Math.floor(duration / 60);
// const seconds = Math.floor(duration % 60);
// this.sizeTime = `文件大小:${
// this.returnSize(this.videoData.fileSize) || 0
// } ;录屏时长:${minutes} 分钟 ${seconds} 秒`;
// });
}
})
.catch(error => {
console.error('Error:', error);
});
},
效果如下
结束了,就是这么简单~~~