上传与下载文件

 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>

 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 }

 ?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 })