需要准备的工作：
①、建立微信小程序工程，编写以下代码。
②、通过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: 1500 101 }) 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: 1500 121 // }) 122 // that.setData({ 123 // downloadPicturePath: res.tempFilePath 124 // }) 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 })
