本文已同步到專(zhuān)業(yè)技術(shù)網(wǎng)站 www.sufaith.com, 該網(wǎng)站專(zhuān)注于前后端開(kāi)發(fā)技術(shù)與經(jīng)驗(yàn)分享, 包含Web開(kāi)發(fā)、Nodejs、Python、Linux、IT資訊等板塊.

最近在使用 vue2.0開(kāi)發(fā)微信公眾號(hào)網(wǎng)頁(yè) 其中涉及到 選擇圖片, 圖片的壓縮上傳, 預(yù)覽, 刪除等操作。

項(xiàng)目整體UI框架使用的是 vux, 但可惜的是 vux 并沒(méi)有提供 圖片上傳組件, 理由見(jiàn) issue

由于之前寫(xiě)PC端后臺(tái)系統(tǒng)時(shí), 采用的 Element UI框架 Upload組件 來(lái)上傳圖片, 包括預(yù)覽刪除等功能,但是引用該組件到移動(dòng)端時(shí), 卻由于該組件的input標(biāo)簽屬性和事件方法設(shè)置問(wèn)題,不能正常使用. 鑒于此, 需要尋找一種可靠的方案,既能兼容移動(dòng)端, 又便于直接上手.

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

一. 使用微信jssdk圖像上傳接口 微信網(wǎng)頁(yè)開(kāi)發(fā)文檔

整個(gè)流程為:

(1) 顯示圖片

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

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

(2) 拿到圖片 File

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

downloadImage 通過(guò)serverId 下載圖片到自己的服務(wù)器

總結(jié):

優(yōu)點(diǎn): 移動(dòng)端兼容性強(qiáng), 可指定是原圖還是壓縮圖等參數(shù), 代碼簡(jiǎn)潔, 便于上手

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

二. 使用微信開(kāi)源的 weui.js

使用流程為:

1. 安裝jquery

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

3. 下載 weui.js項(xiàng)目,并在本地打包編譯

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

4. 將編譯后dist目錄下的 weui.min.js 復(fù)制到 我們的 vue 項(xiàng)目 /static/js/ 目錄下

5. 安裝 weui, 并在 main.js 中導(dǎo)入weui.min.css

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

6. 在我們項(xiàng)目的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文件中 導(dǎo)入 weui.js 和jquery

8.在javascript中定義變量

9. 在 vue文件 的 mounted 函數(shù)中調(diào)用weui.js的uploader方法

10. 定義圖片預(yù)覽與刪除的函數(shù)

最終效果如下:

總結(jié)

以上是生活随笔為你收集整理的elementui el-from 怎样显示图片_vue2.0使用weui.js的uploader组件上传图片(兼容移动端)...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。