跨平臺應用開發進階(四) ：uni-app 實現上傳圖片

一、前言

應用uni-app開發跨平臺App項目時，上傳圖片、文檔等資源功能需求十分常見：點擊相框按鈕可選擇圖片上傳，點擊每一個圖片可以進行預覽，點擊每個圖片刪除圖標可刪除對應圖片。基本實現功能點如下：

本地相冊選擇圖片或使用相機拍照上傳圖片；

可以預覽選擇上傳的圖片；

刪除選錯或不選的圖片；

二、項目實戰

經過研讀uni-app門戶，官網推薦應用uni.chooseImage(OBJECT)接口從本地相冊選擇圖片或使用相機拍照。

對于門戶提到的

選擇照片大多為了上傳，uni ui封裝了更完善的uni-file-picker組件，文件選擇、上傳到uniCloud的免費存儲和cdn中，一站式集成。強烈推薦使用。

??本人并不認可，經過實踐可知，該接口只能實現客戶端將圖片資源上傳到uniCloud后臺服務器中，并不支持本地服務器，故并不滿足功能需求，需謹慎使用。

項目實現頁面大致邏輯如下，完整頁面實現邏輯可移步《Uni-app 實現圖片上傳、刪除、預覽、壓縮》下載。

視圖渲染

JS邏輯層-圖片上傳

// 圖片選擇上傳 upload() { var _self = this; // 圖片選擇，只支持一次選擇一張圖片 uni.chooseImage({ count: 1, sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有 sourceType: ['album', 'camera'], //從相冊、相機選擇 success: function (res) { console.log('res:', res) _self.curTotal++; _self.imgList.push(res.tempFilePaths[0]); const tempFilePaths = res.tempFilePaths[0]; // 圖片上傳 const uploadTask = uni.uploadFile({ url : 'http://22.189.25.91:9988/admin/sys-file/upload', // post請求地址 filePath: tempFilePaths, name: 'file', // 待確認 header: { 'Content-Type': 'multipart/form-data', 'Authorization': getApp().globalData.token || 'Basic YXBwOmFwcA==' }, success: function (uploadFileRes) { console.log('Success:', uploadFileRes); _self.imgsID.push(JSON.parse(uploadFileRes.data).data.fileId); console.log('_self.imgsID:', _self.imgsID) }, fail: function (uploadFileFail) { console.log('Error:', uploadFileFail.data); }, complete: ()=> { console.log('Complete:'); } }); }, error : function(e){ console.log(e); } }); }

JS邏輯層-圖片預覽

/** * 圖片預覽 * @param {Object} i 選擇的圖片索引 * @param {Object} imgList 自行封裝的圖片數組 */ viewImage(i, imgList) { let imgurl = [] imgList.forEach(item => imgurl.push(item)) uni.previewImage({ urls: imgurl, current: imgList[i] }); }

JS邏輯層-圖片刪除

/** 圖片刪除 * @param {Object} i 刪除圖片的索引 * @param {Object} imgList 自行封裝的圖片數組 */ delImg(i, imgList, imgsID) { uni.showModal({ title: '提示', content: '確定要刪除照片嗎？', cancelText: '取消', confirmText: '確定', success: res => { if(res.confirm) { imgList.splice(i, 1); imgsID.splice(i, 1); this.curTotal--; } } }) } }

JS邏輯層-圖片壓縮

// src: 壓縮轉換原始圖片的路徑 // _this: 當前的this，如果不想傳遞this可將該函數改為箭頭函數 // callback: 回調函數，詳情chooseImage方法 function compressImage(src, _this, callback) { var dstname = "_doc/IMG-" + (new Date()).valueOf() + ".jpg"; //設置壓縮后圖片的路徑 var width, height, quality; width = "80%"; height = "80%"; quality = 80; // 具體情況可查看HTML5+文檔 ===> http://www.html5plus.org/doc/zh_cn/zip.html#plus.zip.compressImage plus.zip.compressImage({ src: src, dst: dstname, overwrite: true, quality: quality, width: width, height: height }, function(event) { callback(event.target, dstname, _this); }, function(error) { return src; }); }

注意??：在圖片上傳之前進行圖片壓縮，由于圖片壓縮時間過長，應采用await上傳圖片之前先壓縮，否則上傳會比壓縮先執行。

應用實現效果如下：

拍照或從相冊選擇圖片/上傳一張圖片

上傳3張圖片/刪除圖片

三、知識點總結

3.1 實現原理

客戶端通過uni.chooseImage()方法選擇本地相冊圖片或者拍照，獲取到一個本地資源的臨時文件路徑后，然后以 POST 請求方式通過uni.uploadFile()方法將本地資源上傳到開發者服務器，POST 請求中 content-type 為 multipart/form-data。

3.2 注意事項

??圖片選擇應用uni.chooseImage()實現，請謹慎使用uni ui封裝的所謂更完善的uni-file-picker組件，其將資源文件選擇、上傳到uniCloud的免費存儲和cdn中，一站式集成，個人無法修改。強烈推薦不使用！

??圖片上傳應用uni.uploadFile()實現，上傳成功后回調函數返回的uploadFileRes.data是個String類型，轉對象的時候需要應用JSON.parse()解析。

JSON.parse(uploadFileRes.data).data.fileId)

{ "data": "{\"code\":0,\"msg\":null,\"data\":{\"bucketName\":\"cicc\",\"fileName\":\"5aaa39d669224ffb869b60d245b0751a.jpg\",\"original\":\"1644999553865_mmexport1644913914292.jpg\",\"url\":\"/admin/sys-file/cicc/5aaa39d669224ffb869b60d245b0751a.jpg\",\"fileId\":\"172\"}}", "statusCode": 200, "errMsg": "uploadFile:ok" }

uni.uploadFile() OBJECT 參數說明部分中name屬性為待上傳文件對應的 key , 開發者在服務器端通過這個 key 可以獲取到文件二進制內容，前后端對于該key應保持一致，否則會導致服務無法請求。

圖片預覽應用uni.previewImage()實現，沒遇到坑，大家可根據需求按照門戶參數使用。

四、學習一隅

uni.chooseImage()

uni.uploadFile()

uni.previewImage()

《Cross-platform APP專欄》

移動APP

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。