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

﹏ヽ暗。殇╰゛Y 2022-12-05 10:08 423阅读 0赞

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

H5方式上传图片可参考:[uni-appH5端canvas压缩图片][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
                        });
                    }
                },

[uni-appH5_canvas]: https://editor.csdn.net/md/?articleId=107339675