vue项目+vant组件upload上传多个图片、视频

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>