使用vant-uploader 文件上传,视频截帧以及ios 视频的兼容的处理方式
<template>
<div>
<van-uploader
upload-icon="https://file.baojunev.com/group1/default/20210527/14/51/6/video_icon@2x.png"
accept="video/*"
:before-read="beforeRead"
:after-read="afterRead"
/>
</div>
</template>
<script>
import Vue from "vue";
import { Uploader } from "vant";
Vue.use(Uploader);
export default {
data(){
return {
}
}
methods:{
async afterRead(file) {
const that = this;
// 将选中的上传文件转化为二进制文件,显示在页面上
let uploadUrl = URL.createObjectURL(file.file);
// 截取视频帧数,获取封面
await that.getVideoBase64(uploadUrl).then((res) => {
that.videoPoster = res;
});
let formData = new FormData(); // 为上传文件定义一个formData对象
let config = {
headers: {
"Content-Type": "multipart/form-data",
},
};
formData.append("file", file.file);
this.loading = true;
let type = file.file.type.split('/')[1]
axios({url: `/connector?prefix=${type}&isRelativePath=true`,
method: "post",
data: formData,
...config,
withCredentials: false,
timeout: 40000,
})
.then(function (data) {
console.log(data,'测试的')
that.loading = false;
that.videoUrl = that.videoConfig + data.info.url
})
.catch(function (data) {
console.log("data",data);
});
},
beforeRead(file) {
if (!file.type.includes("video")) {
window.appAction("toast", ["请上传视频文件"]);
return false;
} else if (file.size > 400 * 1024 * 1024) {
window.appAction("toast", ["视频大小超过限制"]);
return false;
} else {
return true;
}
},
//base64 转成文件流
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
// 方式1:
// let newBlob = new Blob([u8arr],"file", {
// type: mime
// });
// newBlob.lastModifiedDate = new Date();
// newBlob.name = Date.now() + '.png';
// return newBlob
return new File([u8arr], Date.now() + ".png", { type: mime });
},
//截取视频某帧
getVideoBase64(url) {
const that = this;
return new Promise(function (resolve, reject) {
let dataURL = "";
let ua = navigator.userAgent.toLowerCase();
// ios 存在video标签不显示同时ios手机端视频上传的格式是.mov格式的文件,故ios视频上传的视频采用默认视频封面提的处理方式,
let isIos = ua.match(/Android/i) ? false : true;
if(url.includes('.mov') || isIos){
let imgUrl ='https://file.baojunev.com/group1/default/20210601/19/05/6/poster_video.jpg'
resolve(imgUrl)
}
else{
let video = document.createElement("video");
video.setAttribute("crossOrigin", "anonymous"); //处理跨域
video.setAttribute("src", url);
video.setAttribute("width", 304);
video.setAttribute("height", 180);
video.currentTime = 0.5;
video.addEventListener("loadeddata", function () {
let canvas = document.createElement("canvas");
let width = video.width; //canvas的尺寸和图片一样
let height = video.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
dataURL = canvas.toDataURL("image/png"); //转换为base64
let file = that.dataURLtoFile(dataURL, "file");
console.log(file, "file");
const suffix = `.${file.type.split("/")[1]}`;
const size_list = file.size;
let formData = new FormData();
formData.append("file", file);
axios({
url:
`/upload?simple_name=1&suffix=${suffix}&size_list=` +
size_list,
method: "post",
data: formData,
cache: false,
contentType: false,
processData: false,
dataType: "json",
timeout: 20000,
withCredentials: false,
}).then(function (data) {
resolve(data.TFS_FILE_NAME[0]);
});
});
}
});
},
}
</script>