上傳多圖 · 小糜學習筆記之前端篇

### 上傳多圖 > 基于weui.css ```vue  <view class="img-con"> <view class="imc1">可以上傳9張圖片 {{files.length}}/9 （長按移除圖片）</view> <view class="photo_box"> <view class="weui-uploader__bd"> <view class="weui-uploader__files" id="uploaderFiles"> <block wx:for="{{files}}" wx:key="*this"> <view class="weui-uploader__file" bindtap="previewImage" bindlongpress="deleteImage" id="{{item}}"> <image class="weui-uploader__img" src="{{item}}" mode="aspectFill"/> </view> </block> </view> <view class="weui-uploader__input-box"> <view class="weui-uploader__input" bindtap="chooseImage"></view> </view> </view> </view> </view> ``` ```javascript /** * 選擇圖片 * 作者：糜家智 * 時間：2021/5/10 12:09 */ chooseImage: function (e) { var that = this; wx.chooseImage({ sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有 success: function (res) { var len = that.data.files.length + res.tempFilePaths.length if (len >= 9){ return wx.showToast({ title: '最多上傳9張', icon: 'none', duration: 1200 }) } wx.showLoading({ title: '圖片上傳中...', }) for (var i = 0; i < res.tempFilePaths.length; i++) { var imgUrl = res.tempFilePaths[i]; wx.uploadFile({ url: 'http://can.hrapp.com/api/action/uploadpic', filePath: imgUrl, name: 'file', formData: { user: 'test' }, success(res) { // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片 console.log(res) }, error(e) { console.log(e) } }) } wx.hideLoading() wx.showToast({ title: '上傳成功！', icon: 'success', duration: 1000 }) that.setData({ files: that.data.files.concat(res.tempFilePaths) }); } }) }, /**預覽照片 */ previewImage: function (e) { wx.previewImage({ current: e.currentTarget.id, // 當前顯示圖片的http鏈接 urls: this.data.files // 需要預覽的圖片http鏈接列表 }) }, /**刪除照片 */ deleteImage: function (e) { var that = this; var images = that.data.files; var index = e.currentTarget.dataset.index; //獲取當前長按圖片下標 wx.showModal({ title: '系統提醒', content: '確定要刪除此圖片嗎？', success: function (res) { if (res.confirm) { images.splice(index, 1); } else if (res.cancel) { return false; } that.setData({ files: images }); } }) }, ```