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);
                        });
                  })
            },
      }
 }  

打印信息