uni-app图片压缩转base64位,多图片上传

之前写过uni-app H5方式上传图片,但是在生成apk后,上传图片失败,不支持app上传。查找资料后解决app上传多图问题。

H5方式上传图片可参考:uni-appH5端canvas压缩图片

图片选择,每次最多选择4张,最多上传8张

            chooseImage: async function() {
    
    
                var that = this;
                uni.chooseImage({
    
    
                    sourceType: ['camera', 'album'],
                    sizeType: ['compressed'],
                    count: 4,
                    success: (res) => {
    
    
                        if (that.img_url.length + res.tempFilePaths.length <= 8) {
    
    
                            for (var i = 0; i < res.tempFilePaths.length; i++) {
    
    
                                uni.getImageInfo({
    
    
                                    src: res.tempFilePaths[i],
                                    success: function(img) {
    
    
                                        that.compressImage(img.path);
                                    },
                                    fail: function(err) {
    
    }
                                });
                            }
                        } else {
    
    
                            uni.showToast({
    
    
                                title: this.staticinfo.tips[0],
                                icon: "none"
                            })
                        }
                    }
                })
            },

压缩图片 图文不能超过20Kb,并上传 that.uploadHead()


            compressImage(img) {
    
    
                var that = this
                return new Promise((res) => {
    
    
                    var localPath = plus.io.convertAbsoluteFileSystem(img.replace('file://', ''));
                    console.log('after' + localPath);
                    // 压缩 
                    plus.io.resolveLocalFileSystemURL(localPath, (entry) => {
    
    
                        entry.file((file) => {
    
     // 可通过entry对象操作图片 
                            if (file.size > 20480) {
    
     // 压缩后size 大于20Kb
                                plus.zip.compressImage({
    
    
                                    src: img,
                                    quality: 0.5,
                                }, (event) => {
    
    
                                    console.log('success zip****' + event.size);
                                    var fileReader = new plus.io.FileReader(); // 文件系统中的读取文件对象,用于获取文件的内容
                                    fileReader.readAsDataURL(file); //以URL编码格式读取文件数据内容
                                    fileReader.onloadend = function(evt) {
    
     //读取文件成功完成的回调函数
                                    console.log(evt.target.result.split(",")[1]) //拿到'data:image/jpeg;base64,'后面的
                                    that.uploadHead(evt.target.result.split(",")[1], img)
                                    }
                                }, function(error) {
    
    
                                    uni.showModal({
    
    
                                        content: '分享图片太大,需要请重新选择图片!',
                                        showCancel: false
                                    })
                                });
                            }
                        });
                    }, (e) => {
    
    
                        uni.showModal({
    
    
                            content: '分享图片太大,需要请重新选择图片!',
                            showCancel: false
                        })
                    });
                })
            },

上传图片

    async uploadHead(img, blod) {
    
    
                console.log("----img----" + JSON.stringify(img))
                let opts = {
    
    
                    //接口地址 
                    url: this.$request.SERVER_URL + this.interfaceUrl.baseConstant.appBase64ImgUpload,
                    //请求类型
                    method: 'post'
                };
                let param = {
    
    
                    //该请求所需要的参数
                    userId: this.userId,
                    token: this.token,
                    data: img, //图片的流数据
                    fileType: 'jpeg' //图片格式
                };
                const result = await this.$request.baseRequest(opts, param);
                console.log(result)
                console.log(opts)
                if (result.status == "000") {
    
    
                    this.img_url = this.img_url.concat(result.imgUrl)
                    this.imageList = this.imageList.concat(blod)
                } else {
    
    
                    uni.showModal({
    
    
                        content: result.msg,
                        showCancel: false
                    });
                }
            },

猜你喜欢

转载自blog.csdn.net/weixin_44433499/article/details/108495533