E企盈营销工具技术服务商 热线:4006-838-530

微信小程序上传与下载文件

E企盈直播平台营销卖货系统

需要准备的工作:①、建立微信小程序工程,编写以下代码。②、通过IDE建立springboot+web工程,编写接收文件以及提供下载文件的方式,并将上传的文件相关信息记录在mysql数据库中。具体请查看https://www.cnblogs.com/chenfeifen/p/10261980.html一、配置index.wxml 1 <!–index.wxml–> 2 <view class=”container”> 3   <view class=”userinfo”> 4     <button bindtap=”upload”> 上传原图</button> 5     <button bindtap=”download”> 下载图片</button> 6   </view> 7   <view class=”imginfo”> 8   <block wx:for=”{{tempFilePaths}}” wx:key=”{{index}}”> 9             <image src=”{{item }}” bindtap=”listenerButtonPreviewImage” data-index=”{{index}}” style=”width: 100%;”/>10   </block>11   <block>  <image src='{{downloadPicturePath}}’ bindtap=’preview_download_picture’></image>12   </block>13   </view>14 </view>二、配置index.wxss 1 1 /**index.wxss**/ 2 2 .userinfo { 3 3   display: flex; 4 4   /* flex-direction: column; */ 5 5   align-items: center; 6 6 } 7 7 .imginfo { 8 8   display: flex; 9 9   flex-direction: column;10 10   align-items: center;11 11 }12 12 .userinfo-avatar {13 13   width: 128rpx;14 14   height: 128rpx;15 15   margin: 20rpx;16 16   border-radius: 50%;17 17 }18 18 19 19 .userinfo-nickname {20 20   color: #aaa;21 21 }22 22 23 23 .usermotto {24 24   margin-top: 200px;25 25 }三、配置index.js  1 //index.js  2 //获取应用实例  3 const app = getApp()  4 Page({  5   /**  6   * 页面的初始数据  7    */  8  data: {  9    tempFilePaths: [], 10     downloadPicturePath:” 11  }, 12   /** 13   * 上传图片方法 14    */ 15   upload: function () { 16     let that = this; 17    wx.chooseImage({ 18       count: 9, // 默认9 19       sizeType: [‘original’, ‘compressed’], // 可以指定是原图还是压缩图,默认二者都有 20       sourceType: [‘album’, ‘camera’], // 可以指定来源是相册还是相机,默认二者都有 21       success: res => { 22        wx.showToast({ 23           title: ‘正在上传…’, 24           icon: ‘loading’, 25           mask: true, 26           duration: 1000 27        })   28         // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 29         let tempFilePaths = res.tempFilePaths; 30        that.setData({ 31          tempFilePaths: tempFilePaths 32        }) 33         /** 34         * 上传完成后把文件上传到服务器 35          */ 36         var count = 0; 37           //上传文件 38         for (var i = 0; i < this.data.tempFilePaths.length;i++){ 39          wx.uploadFile({ 40             url: “http://*****/upload”,//请求上传的url 41            filePath: tempFilePaths[i], 42             name: ‘filename’, 43            header: { 44               “Content-Type”: “multipart/form-data” 45            }, 46             success: function (res) { 47               count++; 48               //如果是最后一张,则隐藏等待中   49               if (count == tempFilePaths.length) { 50                wx.hideToast(); 51              } 52              wx.showToast({ 53                 title: ‘上传成功’, 54                 icon: ”, 55                 mask: true, 56                 duration: 1500 57              })   58            }, 59             fail: function (res) { 60              wx.hideToast(); 61              wx.showModal({ 62                 title: ‘错误提示’, 63                 content: ‘上传图片失败’, 64                 showCancel: false, 65                 success: function (res) { } 66              }) 67            } 68          }); 69        } 70      } 71    }) 72  }, 73   /** 74   * 预览下载的图片 75    */ 76   preview_download_picture:function(){ 77      wx.previewImage({ 78         current: this.data.downloadPicturePath, 79         urls: this.data.downloadPicturePath, 80      }) 81  }, 82     /** 83   * 下载图片方法 84    */ 85   download:function(){ 86     var that = this; 87    wx.downloadFile({ 88        url:”http://******/download”, //仅为示例,并非真实的资源 89       success: function (res) { 90        console.log(res) 91         // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容 92         if (res.statusCode === 200) { 93          wx.playVoice({ 94             filePath: res.tempFilePath 95          }) 96          wx.showToast({ 97             title: ‘下载成功’, 98             icon: ”, 99             mask: true,100             duration: 1500101          })102          that.setData({103             downloadPicturePath: res.tempFilePath//将下载的图片路径传给页面显示104          })105        }106         //保存下载的图片到本地107         // wx.saveImageToPhotosAlbum({108         //     filePath: res.tempFilePath,109         //   success:110         //     function (data) {111         //       console.log(data);112         //       // wx.showModal({113         //       //   title: ‘下载成功’,114         //       //   content: ‘下载成功’,115         //       // })116         //       wx.showToast({117         //         title: ‘下载成功’,118         //         icon: ”,119         //         mask: true,120         //         duration: 1500121         //       })  122         //       that.setData({123         //         downloadPicturePath: res.tempFilePath124         //       })125         //     },126         // })127      }128    });129  },130   /**131   * 预览图片方法132    */133   listenerButtonPreviewImage: function (e) {134     let index = e.target.dataset.index;135     let that = this;136    wx.previewImage({137      current: that.data.tempFilePaths[index],138      urls: that.data.tempFilePaths,139       //这根本就不走140       success: function (res) {141         //console.log(res);142      },143       //也根本不走144       fail: function () {145         //console.log(‘fail’)146      }147    })148  },149 150   /**151   * 生命周期函数–监听页面加载152    */153   onLoad: function (options) {154     155  },156 157   /**158   * 生命周期函数–监听页面初次渲染完成159    */160   onReady: function () {161     162  },163 164   /**165   * 生命周期函数–监听页面显示166    */167   onShow: function () {168     169  },170 171   /**172   * 生命周期函数–监听页面隐藏173    */174   onHide: function () {175     176  },177 178   /**179   * 生命周期函数–监听页面卸载180    */181   onUnload: function () {182     183  },184 185   /**186   * 页面相关事件处理函数–监听用户下拉动作187    */188   onPullDownRefresh: function () {189     190  },191 192   /**193   * 页面上拉触底事件的处理函数194    */195   onReachBottom: function () {196     197  },198 199   /**200   * 用户点击右上角分享201    */202   onShareAppMessage: function () {203     204  }205 })    微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序上传与下载文件
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏