任務：小程序上傳圖片到服務器，最多上傳三張，前端可以刪除圖片

使用到的API有兩個：wx.uploadFile wx.chooseImage

示例WXML：

<view class="sale after-pic"><block wx:for="{{imgList}}" wx:key="{{index}}"><view class="pic"><image src="{{item}}" /><icon type="clear" size="20" catchtap="clearImg" data-id="{{index}}"/></view></block><image src="../../images/upload.png" catchtap="chooseImage" /> </view> <button catchtap="onSub">提交</button>

imgList是wx.chooseImage成功后，返回的圖片臨時地址

示例JS

Page({data: {imgList:[]},// 使用async await等待圖片上傳onSub: async function() {// 點擊提交后，開始上傳圖片let imgUrls = []for (let index = 0; index < this.data.imgList.length; index++) {await this.uploadFile(this.data.imgList[index]).then((res) => {// 這里要注意把res.data parse一下，默認是字符串let parseData = JSON.parse(res.data)imgUrls.push(parseData.data) // 圖片地址})}console.log(imgUrls) // 3張圖片上傳成功后，執行其他操作},// 刪除某張圖片clearImg: function (params) {let imgList = this.data.imgListlet id = params.currentTarget.dataset.id // 圖片索引imgList.splice(id, 1) // 刪除this.setData({imgList: imgList})},chooseImage: function (params) {wx.chooseImage({count: 3, // 做多3張sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: (res) => {// 存儲臨時地址this.setData({imgList: res.tempFilePaths})}})},uploadFile: function (filePath) {// 返回Promise是為了解決圖片上傳的異步問題return new Promise( (resolve, reject) => {wx.uploadFile({url: app.globalData.baseUrl + '/file/upload', // 上傳地址filePath: filePath,name: 'file', // 這里的具體值，問后端人員formData: {},header: {"Content-Type": "multipart/form-data"},success: (res) =>{// 圖片上傳成功后，后端會返回一個地址，可以把它存到imgUrlsthis.imgUrls.push(res.data.data)},fail:(err) => {console.log(err)}})})} })

特別說明一下，截止我寫這篇文章為止，小程序還是不支持async/await語法的，所以需要使用regenerator這個庫

轉載于:https://www.cnblogs.com/yesyes/p/9318392.html

總結

以上是生活随笔為你收集整理的小程序上传多张图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。