1. 程式人生 > >微信小程序 上傳圖的功能

微信小程序 上傳圖的功能

單擊 ast multi message compress 操作 push multipart feedback

首先選擇圖片,然後循環,再就是在點擊發布的時候循環圖片地址賦值,包括刪除命令

技術分享圖片

js代碼:

  //選擇圖片
  uploadImgAdd: function(e) {
    var imgs = this.data.imgs;
    console.log(imgs)
    wx.chooseImage({
      sizeType: [‘original‘, ‘compressed‘],
      sourceType: [‘album‘, ‘camera‘],
      success: (res) => {
        console.log(res)
        let tempFilePaths 
= res.tempFilePaths; let imgs = this.data.imgs; console.log(‘imgs‘) console.log(imgs) //上傳的圖片 for (var i = 0; i < tempFilePaths.length; i++) { if (imgs.length >= 9) { return false; } else { imgs.push(tempFilePaths[i]) } }
//上傳的圖片放到頁面上 this.setData({ imgs: imgs }) } }) }, /** * 獲取上傳圖片地址 */ //單擊發布上傳圖片和內容 bindFormSubmit: function(e) { var imgArr = this.data.imgs; this.addPic(e, imgArr) }, addPic: function(e, imgArr) { console.log("imgArr") console.log(imgArr) let uploadimagsSrc
= this.data.uploadimagsSrc; console.log("uploadimagsSrc") console.log(uploadimagsSrc) for (let i in imgArr) { wx.uploadFile({ url: app.data.urls + ‘images/Picture‘, filePath: imgArr[i], header: { ‘content-type‘: ‘multipart/form-data‘ }, name: ‘file‘, success: res => { console.log(res) let data = res.data; console.log(data) console.log([...uploadimagsSrc, data]) uploadimagsSrc = [...uploadimagsSrc, data]; console.log(uploadimagsSrc) this.setData({ uploadimagsSrc: uploadimagsSrc }) }, }) } let timer = setInterval(() => { //間歇調用 if (uploadimagsSrc.length == imgArr.length) { console.log(uploadimagsSrc) console.log(imgArr) debugger this.sendMessageInfo(e, uploadimagsSrc); clearInterval(timer); //可取消由 setInterval() 函數設定的定時執行操作 } }, 500) }, sendMessageInfo: function(e, imagsSrc) { var formData = e.detail.value.message if (formData.length == 0) { wx.showToast({ title: ‘意見反饋內容不能為空,說幾句話吧~‘, icon: ‘none‘, duration: 1500 }) return false; } var replaceLeftRig = formData.replace(/(^\s*)|(\s*$)/g, "").length if (replaceLeftRig < 15) { wx.showToast({ title: ‘意見反饋內容不能少於15個字‘, icon: ‘none‘, duration: 1500 }) return false; } imagsSrc = imagsSrc.join(‘;‘) wx.request({ url: app.data.urls + ‘feedback/insertCustomerFeedback‘, data: { "customerId": app.data.customerId, "feedbackMessages": formData, "imagesAddress": imagsSrc, }, method: "POST", header: { ‘content-type‘: ‘application/json‘ // 默認值 }, success: function(res) { console.log(res) /** * * 異常判斷 * * */ if (res.data.status == 200) { wx.showModal({ content: ‘謝謝您提交的反饋,後臺的小哥哥會第一時間收到哦~‘, showCancel: false, confirmText: "知道了", success: function(res) { if (res.confirm) { wx.navigateBack({ delta: 1 }) } } }); } else { wx.showModal({ content: ‘系統繁忙‘, showCancel: false, confirmText: "知道了", success: res => { console.log(res) } }); } } }) }, //刪除圖片 uploadImgClose: function(e) { var imgs = this.data.imgs; var index = e.currentTarget.dataset.index; imgs.splice(index, 1); this.setData({ imgs: imgs }); // console.log(imgs) },


feedBack/feedBack

微信小程序 上傳圖的功能