需要准备的工作：
①、建立微信小程序工程，编写以下代码。
②、通过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 })
微信小程序
