vue项目+vant组件upload上传多个图片、视频
vue项目+vant组件upload上传多个图片、视频base64转成文件流jsbase64toFile (dataurl, filename = 'file') {let arr = dataurl.split(',')let mime = arr[0].match(/:(.*?);/)[1]let suffix = mime.split('/')[1]let bstr = atob(arr[1
·
vue项目+vant组件upload上传多个图片、视频
base64转成文件流js
base64toFile (dataurl, filename = 'file') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
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}.${suffix}`, {
type: mime
})
},
图片类型检查js
checkFile(file) {
// console.log(11111);
const format = ["jpg", "png", "jpeg", 'mp4'];
const index = file.name.lastIndexOf(".");
const finalName = file.name.substr(index + 1);
if (!format.includes(finalName.toLowerCase())) {
this.$toast("请上传" + format.join(",") + "格式图片");
return false;
} else {
return true;
}
},
源码js
base64toFile (dataurl, filename = 'file') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
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}.${suffix}`, {
type: mime
})
},
// 上传前置处理
beforeRead(file){
if (file instanceof Array) {
//判断是否是数组
let a = file.every((v)=>{
return this.checkFile(v)
})
if(a){
return true
} else {
return false
}
} else {
if(this.checkFile(file)) {
return true;
} else {
return false;
}
}
},
//图片类型检查
checkFile(file) {
const format = ["jpg", "png", "jpeg", 'mp4'];
const index = file.name.lastIndexOf(".");
const finalName = file.name.substr(index + 1);
if (!format.includes(finalName.toLowerCase())) {
this.$toast("请上传" + format.join(",") + "格式图片");
return false;
} else {
return true;
}
},
// 文件读取完成后的回调函数
afterRead(file,detail) {
// 此时可以自行将文件上传至服务器
if (file instanceof Array) {
file.map((v) => {
v.status = "uploading";
v.message = "上传中...";
// this.uploadImg(this.base64toFile (v.content));
});
this.uploadImg(file);
} else {
file.status = "uploading";
file.message = "上传中..."
this.uploadImg(file);
}
},
//上传 /apis/qiniu/uploadImage
uploadImg(file) {
const formData = new FormData();
if(file instanceof Array) {
for(var i = 0;i<file.length;i++){
// console.log(file[i],i)
let files = this.base64toFile(file[i].content)
formData.append("doc["+i + ']', files);
}
}else {
let files = this.base64toFile(file.content)
for(var j = 0; j<this.fileList.length;j++){
formData.append("doc["+j + ']', files);
}
}
var picture = {}
this.getImage('api', formData ,res=>{
if (res.result==1) {
if (file instanceof Array) {
this.backList = res.data
//判断是否是数组
file.map((v, i) => {
v.status = "success";
v.message = "";
v.url = res.data[i].url;
});
} else {
picture.type = res.data[0].type
picture.url = res.data[0].url
this.backList.push(picture)
file.status = "success";
file.message = "";
file.url = res.data[0].url;
}
} else {
alert(res.msg)
this.fileList = []
}
})
},
//文件大小超过限制时触发
//onOversize(file){
// console.log(file);
// this.$toast({
// msg:'文件大小不能超过 500kb'
// })
// },
//删除
delUploadImg(item,detail) {
console.log(this.fileList,item,4555555)
for(var i = 0;i < this.fileList.length;i++){
if( this.fileList[i].url == item.url){
this.fileList.splice(i,1)
}
}
for(var i = 0;i < this.backList.length;i++){
if( this.backList[i].url == item.url){
this.backList.splice(i,1)
}
}
},
// 请求图片接口
getImage(url, ajaxdata, callback) {
let that = this
$.ajax({
type: "POST",
url: that.default_url+url,
data: ajaxdata,
processData: false, // 不处理发送的数据
dataType: "json",
contentType: false,
// headers: { 'Content-Type': 'multipart/form-data' },
success: function (res) {
callback(res)
}
});
},
html
<div class="applyMaterialFile">
<!-- <div class="item" v-for="(item,index) in fileList" @click="del(index)">
<div class="del"><img src="./img/del.png" alt=""></div>
<img src="./img/del.png" width="100%" alt="">
</div> -->
<van-uploader
v-model="fileList"
class="uploaderOne"
multiple
:after-read="afterRead"
:before-read="beforeRead"
accept=".jpeg , .png , .mp4, .jpg"
:before-delete="delUploadImg"
:max-count="4" >
</van-uploader>
</div>
更多推荐
已为社区贡献1条内容
所有评论(0)