微信小程序-图片上传

.wxml

 1 <view>
 2     <view class="tit-main">
 3       请提供相关问题的截图或照片
 4       <text class="tit-deputy">(选填、最多6张)</text>
 5     </view>
 6     <view class="upImg">
 7       <view class="he" wx:if="{{arr!=[]}}">
 8         <block wx:for="{{arr}}">
 9           <view class="jia">
10             <view class="del" data-index="{{index}}" bindtap="delClick">×</view>
11             <image class="show-image" mode="aspectFitf" src="{{item}}"></image>
12           </view>
13         </block>
14       </view>
15       <view class="jia jia2" bindtap="clickJia" wx:if="{{arr.length<=5}}">
16         <image class="upImg-img" src="/static/ico/upImg.png"></image>
17         <view class="upWz">上传图片</view>
18       </view>
19     </view>
20 </view>

.js

 1 data: {
 2     arr: [],
 3     imgUrl: ''
 4  },
 5 // 添加图片
 6   clickJia() {
 7     var _this = this
 8     wx.chooseImage({
 9       count: 6,
10       success: function(res) {
11         _this.setData({
12           arr: [..._this.data.arr, ...res.tempFilePaths]
13         })
14         if (_this.data.arr.length > 6) {
15           let arry = _this.data.arr.slice(0, 6)
16           _this.setData({
17             arr: arry
18           })
19         }
20       },
21     })
22   },
23   //上传图片
24   uploadImgFile(imgList) {
25     let _this = this
26     let _data = _this.data
27     let _global = app.globalData
28     let pics = []
29     let _url = `${_global.baseUrl}/emall-miniapp/feedback/UploadPictures`
30     const promises = imgList.map(item => {
31       return _this.uploadFile(_url, item).then(res => {
32         pics.push(_this.data.imgIdList)
33       })
34     })
35     Promise.all(promises).then(res => {
36       // 拼为以,隔开的字符串
37       let picStr = pics.join(',')
38       _this.submitRefund(picStr)
39     })
40   },
41   /**
42    * 上传
43    */
44   uploadFile(url, src) {
45     let _this = this
46     let _data = _this.data
47     return new Promise(function(resolve, reject) {
48       utils.globalShowTip(true)
49       wx.uploadFile({
50         header: {
51           "Content-Type": "multipart/form-data"
52         },
53         url: url,
54         filePath: src,
55         name: 'myPic',
56         formData: {},
57         success: (res) => {
58           // 拼接调用提交接口时带的pic串
59           let _result = JSON.parse(res.data)
60           let imgIdList
61           if (_result.result && _result.result.pictureId) {
62             imgIdList = _result.result.pictureId
63           }
64           let strimg = _result.result.picPath + ","
65           _this.data.imgUrl.concat(strimg)
66           _this.setData({
67             imgIdList: imgIdList,
68             imgUrl: _this.data.imgUrl.concat(strimg)
69           })
70           resolve()
71         },
72         fail: (res) => {},
73         complete: () => {}
74       })
75     })
76   },
77   // 删除图片
78   delClick(e) {
79     this.data.arr.splice(e.target.dataset.index, 1)
80     this.setData({
81       arr: this.data.arr
82     })
83   },

效果图