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

需要准备的工作：

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

②、通过IDE建立springboot+web工程，编写接收文件以及提供下载文件的方式，并将上传的文件相关信息记录在mysql数据库中。具体请查看https://www.cnblogs.com/chenfeifen/p/10261980.html

一、配置index.wxml

 <!--index.wxml-->
 <view class="container">
   <view class="userinfo">
     <button bindtap="upload"> 上传原图</button>
     <button bindtap="download"> 下载图片</button>
   </view>
   <view class="imginfo">
   <block wx:for="{{tempFilePaths}}" wx:key="{{index}}">
             <image src="{{item }}" bindtap="listenerButtonPreviewImage" data-index="{{index}}" style="width: 100%;"/>
   </block>
   <block>  <image src='{{downloadPicturePath}}' bindtap='preview_download_picture'></image>
   </block>
   </view>
 </view>

二、配置index.wxss

  1 /**index.wxss**/
  2 .userinfo {
  3   display: flex;
  4   /* flex-direction: column; */
  5   align-items: center;
  6 }
  7 .imginfo {
  8   display: flex;
  9   flex-direction: column;
 10   align-items: center;
 11 }
 12 .userinfo-avatar {
 13   width: 128rpx;
 14   height: 128rpx;
 15   margin: 20rpx;
 16   border-radius: 50%;
 17 }
 18
 19 .userinfo-nickname {
 20   color: #aaa;
 21 }
 22
 23 .usermotto {
 24   margin-top: 200px;
 25 }

三、配置index.js

 //index.js
 //获取应用实例
 const app = getApp()
 Page({
   /**
    * 页面的初始数据
    */
   data: {
     tempFilePaths: [],
     downloadPicturePath:''
   },
   /**
    * 上传图片方法
    */
   upload: function () {
     let that = this;
     wx.chooseImage({
       count: 9, // 默认9
       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
       success: res => {
         wx.showToast({
           title: '正在上传...',
           icon: 'loading',
           mask: true,
           duration: 1000
         })
         // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
         let tempFilePaths = res.tempFilePaths;
         that.setData({
           tempFilePaths: tempFilePaths
         })
         /**
          * 上传完成后把文件上传到服务器
          */
         var count = 0;
           //上传文件
         for (var i = 0; i < this.data.tempFilePaths.length;i++){
           wx.uploadFile({
             url: "http://*****/upload",//请求上传的url
             filePath: tempFilePaths[i],
             name: 'filename',
             header: {
               "Content-Type": "multipart/form-data"
             },
             success: function (res) {
               count++;
               //如果是最后一张,则隐藏等待中
               if (count == tempFilePaths.length) {
                 wx.hideToast();
               }
               wx.showToast({
                 title: '上传成功',
                 icon: '',
                 mask: true,
                 duration: 1500
               })
             },
             fail: function (res) {
               wx.hideToast();
               wx.showModal({
                 title: '错误提示',
                 content: '上传图片失败',
                 showCancel: false,
                 success: function (res) { }
               })
             }
           });
         }
       }
     })
   },
   /**
    * 预览下载的图片
    */
   preview_download_picture:function(){
       wx.previewImage({
         current: this.data.downloadPicturePath,
         urls: this.data.downloadPicturePath,
       })
   },
     /**
    * 下载图片方法
    */
   download:function(){
     var that = this;
     wx.downloadFile({
        url:"http://******/download", //仅为示例，并非真实的资源
       success: function (res) {
         console.log(res)
         // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
         if (res.statusCode === 200) {
           wx.playVoice({
              filePath: res.tempFilePath
           })
           wx.showToast({
             title: '下载成功',
             icon: '',
             mask: true,
             duration: 1500
           })
           that.setData({
             downloadPicturePath: res.tempFilePath//将下载的图片路径传给页面显示
           })
         }
         //保存下载的图片到本地
         // wx.saveImageToPhotosAlbum({
         //     filePath: res.tempFilePath,
         //   success:
         //     function (data) {
         //       console.log(data);
         //       // wx.showModal({
         //       //   title: '下载成功',
         //       //   content: '下载成功',
         //       // })
         //       wx.showToast({
         //         title: '下载成功',
         //         icon: '',
         //         mask: true,
         //         duration: 1500
         //       })
         //       that.setData({
         //         downloadPicturePath: res.tempFilePath
         //       })
         //     },
         // })
       }
     });
   },
   /**
    * 预览图片方法
    */
   listenerButtonPreviewImage: function (e) {
     let index = e.target.dataset.index;
     let that = this;
     wx.previewImage({
       current: that.data.tempFilePaths[index],
       urls: that.data.tempFilePaths,
       //这根本就不走
       success: function (res) {
         //console.log(res);
       },
       //也根本不走
       fail: function () {
         //console.log('fail')
       }
     })
   },

   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {

   },

   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {

   },

   /**
    * 生命周期函数--监听页面显示
    */
   onShow: function () {

   },

   /**
    * 生命周期函数--监听页面隐藏
    */
   onHide: function () {

   },

   /**
    * 生命周期函数--监听页面卸载
    */
   onUnload: function () {

   },

   /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
   onPullDownRefresh: function () {

   },

   /**
    * 页面上拉触底事件的处理函数
    */
   onReachBottom: function () {

   },

   /**
    * 用户点击右上角分享
    */
   onShareAppMessage: function () {

   }
 })