承接《vue截取video视频中的某一帧》视频截取后保存的是base64格式,没法上传服务器,需要转化一下
//将base64转换为文件
dataURLtoFile(dataurl, filename) {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1];
if(!filename) {//若无文件名则取当前时间戳
filename = Date.parse(new Date()) + '.jpg';
}
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
},
//base64转化为blob
dataURItoBlob(base64Data) {
var byteString;
if(base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else{
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], {
type: mimeString
});
return blob;
}
//转化你的base64图片
let blob = this.$api.dataURLtoFile(this.base64Data)
//再包装一下
let formData = new FormData();
formData.set("file", blob);
//最后将 formData 上传到你的ajax接口
我使用的是转化成文件的方式,一开始使用blob上传的时候总报500,后台说因为没有文件名,所以又该用第一种方法,各位小伙伴可以根据后台接口的实际情况选择