uni-app 上传图片之压缩图片上传

原文：https://ask.dcloud.net.cn/article/36331?notification_id-701034__item_id-28962

应后台要求，上传得图片不得大于500kb，但我发现拍照或者相册里面的照片普遍大于1M，试用多种方法之后，终于在移动端测试成功，以下是全部代码

clickImg()页面点击事件，触发选择图片/拍照事件
uploadFile() 上传图片，使用async同步化，压缩完再进行上传。
compress() 压缩图片

• 5+方法限于移动端使用，因此要限制一下平台,很重要！！！
• async await--上传图片之前先压缩，否则上传会比压缩先执行

压缩图片api方法：https://www.html5plus.org/doc/zh_cn/zip.html
效果：

//html部分
      
 
 
 

//js部分
 export default {
      data() {
            return {
                  image:"",
                  imageInfo:{}
            };
      },
      onLoad() {},
      methods:{
            clickImg(){		//选择图片 
                  let _this=this
                  uni.chooseImage({
                        count: 1,
                        sizeType:['compressed'],
                        success(res) {
                              _this.uploadFile(res.tempFilePaths[0])  		// 上传图片到服务器
                        }
                  })
            },
            //上传图片
            async uploadFile(image){
                  uni.showLoading({
                        mask:true,
                        title: '上传中...'
                  })
                  // #ifdef APP-PLUS
                  this.image=await this.compress(image);// await--上传图片之前先压缩，否则上传会比压缩先执行
                  // #endif
                  // #ifdef H5
                  this.image=image
                  // #endif
                  //开始上传，此处可先注释看压缩效果
                  uni.uploadFile({
                        url: utils.api.currency+'images/qiniu', //仅为示例，此处填写后台的上传图片接口地址
                        filePath: this.image,
			name: 'image',
			header:{'Authorization': `Bearer ${uni.getStorageSync('token')}`,},
			success: (uploadFileRes) => {		//图片上传成功
				uni.hideLoading()
				let img=JSON.parse(uploadFileRes.data)// console.log(img) 
			},
			fail: (err) => {
				uni.hideLoading()// console.log('uploadImage fail', err);
			}
                  });
            },
            //压缩图片
            compress(img){   
                  console.log('开始压缩');
                  let that=this
                  return new Promise((res) => {
                        // var localPath = plus.io.convertAbsoluteFileSystem(img);
                        plus.io.resolveLocalFileSystemURL(img, (entry) => {		//通过URL参数获取目录对象或文件对象
                        entry.file((file) => {		// 可通过entry对象操作图片 
                        console.log('压缩前图片信息:' + JSON.stringify(file)); //压缩前图片信息
                              if(file.size > 504800) {	//   如果大于500Kb进行压缩
                                    plus.zip.compressImage({	// 5+ plus.zip.compressImage 了解一下，有详细的示例
                                          src: img,          //src: 压缩原始图片的路径    
                                          dst: img.replace('.png', '2222.png').replace('.PNG', '2222.PNG').replace('.jpg','2222.jpg').replace('.JPG','2222.JPG'),
                                          width: '40%',      //dst: (String 类型 )压缩转换目标图片的路径，这里先在后面原始名后面加一个2222区分一下
                                          height: '40%',     //width,height: (String 类型 )缩放图片的宽度,高度
                                          quality: 10,      //quality: (Number 类型 )压缩图片的质量
                                          overwrite: true,  //overwrite: (Boolean 类型 )覆盖生成新文件
                                          // format:'jpg'   //format: (String 类型 )压缩转换后的图片格式
                                    }, (event) => {
                                          console.log('压缩后图片信息:' + JSON.stringify(event));// 压缩后图片信息
                                          this.imageInfo=event
                                          let newImg = event.target;
                                          res(newImg);	//返回新的图片地址，在uploadFile之前接收
				         }, function(err) {
					    // console.log('Resolve file URL failed: ' + err.message);
				         });
                              }else{//else小于500kb跳过压缩，直接返回现有的src
                                    res(img);
                              }
                        });
                        }, (e) => { // 返回错误信息
                              // console.log('Resolve file URL failed: ' + e.message);
                        });
                  })
            },
      }
 }  

打印信息