本文已同步到專業技術網站 www.sufaith.com, 該網站專注于前后端開發技術與經驗分享, 包含Web開發、Nodejs、Python、Linux、IT資訊等板塊.

最近在使用 vue2.0開發微信公眾號網頁 其中涉及到 選擇圖片, 圖片的壓縮上傳, 預覽, 刪除等操作。

項目整體UI框架使用的是 vux, 但可惜的是 vux 并沒有提供 圖片上傳組件, 理由見 issue

由于之前寫PC端后臺系統時, 采用的 Element UI框架 Upload組件 來上傳圖片, 包括預覽刪除等功能,但是引用該組件到移動端時, 卻由于該組件的input標簽屬性和事件方法設置問題,不能正常使用. 鑒于此, 需要尋找一種可靠的方案,既能兼容移動端, 又便于直接上手.

以下是本人嘗試的兩種方案, 最終我選擇的是第二種: 引入weui.js, 并自定義上傳動作,異步獲取七牛token, 然后調用手動上傳方法.

一. 使用微信jssdk圖像上傳接口 微信網頁開發文檔

整個流程為:

(1) 顯示圖片

chooseImage 得到選定照片的本地ID列表

getLocalImgData 得到圖片的base64數據，可以用img標簽顯示. (此接口僅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接顯示圖片的問題)

(2) 拿到圖片 File

uploadImage 上傳圖片接口, 返回圖片的服務器端ID

downloadImage 通過serverId 下載圖片到自己的服務器

總結:

優點: 移動端兼容性強, 可指定是原圖還是壓縮圖等參數, 代碼簡潔, 便于上手

缺點: (1) 只能在移動端使用,無法在PC端使用; (2) 采用流程為: 先上傳微信服務器, 然后下載拿到圖片, 最后存到自己的服務器, 這種方式開發邏輯冗雜, 上傳下載也耗費過多資源; (3)目前多媒體文件下載接口的頻率限制為10000次/天, 業務稍微多些,容易受接口頻率限制.

二. 使用微信開源的 weui.js

使用流程為:

1. 安裝jquery

2. 在 /build/webpack.base.conf.js 文件中 配置 jquery 別名

3. 下載 weui.js項目,并在本地打包編譯

git clone https://github.com/weui/weui.js.git
cd weui.js
npm install
npm run build

4. 將編譯后dist目錄下的 weui.min.js 復制到 我們的 vue 項目 /static/js/ 目錄下

5. 安裝 weui, 并在 main.js 中導入weui.min.css

npm install --save weui // 安裝weuiimport 'weui/dist/style/weui.min.css' // 在main.js中導入weui.min.css

6. 在我們項目的vue文件中 引入 weui 的UI布局 Uploader

<div class="weui-cells weui-cells_form" id="uploader"><div class="weui-cell"><div class="weui-cell__bd"><div class="weui-uploader"><div class="weui-uploader__hd"><p class="weui-uploader__title">圖片上傳</p><div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div></div><div class="weui-uploader__bd"><ul class="weui-uploader__files" id="uploaderFiles" @click="handleClickUploadList"></ul><div class="weui-uploader__input-box"><input name="file" id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" capture="camera" multiple=""/></div></div></div></div></div></div>

7. 在我們的vue文件中 導入 weui.js 和jquery

8.在javascript中定義變量

9. 在 vue文件 的 mounted 函數中調用weui.js的uploader方法

10. 定義圖片預覽與刪除的函數

最終效果如下: