承接《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,后台说因为没有文件名,所以又该用第一种方法,各位小伙伴可以根据后台接口的实际情况选择