• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

需要准备的工作:

①、建立微信小程序工程,编写以下代码。

②、通过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 })

 

 

  


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
[转]微信小程序实现图片上传功能 - freeliver54发布时间:2022-07-18
下一篇:
微信小程序上传项目到github发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap