微信小程序之图片上传，下载功能

直接上代码...

1、wxml部分

<view class='ling'>
<view class='kkkimg' bindtap='ppp'>上传图片</view>
</view>
<view class='oning'>-----点\r\t击\r\t\r\t\r\t图片预览------</view>
<view class='bang'>
<image class='kkk' wx:for='{{shuju_}}' wx:key='list' src='{{item}}' data-list='{{item}}' data-src="{{shuju_}}" mode="widthFix" bindtap="imgYu"></image>
</view>


<view class='ping'>
  <view class='tupian' bindtap='xianzhai' wx:for='{{shuju_}}' wx:key='list' data-url='{{item}}'>图{{index}}下载</view>
</view>
<!-- <view bindtap='shop_dian' id='159' style='width:100%; margin-bottom:40px;'>详情跳转</view> -->
<view>-------------------------------</view>
<view class='kkkimg' bindtap='error' >取消下载</view>
<view class='ling'>
<view class='kkkimg tupian' bindtap='xianzhai'  data-url='https://www.wh2013.net/xcy/Uploads/Banner/5b3acc9869db0.jpg'>图片下载</view>
</view>
<view class='jj'>
<image wx:for='{{fileList}}' wx:key='list' src='{{item.filePath}}'></image>
</view>

2.wxss部分

.ling{
  width: 100%;
  height: auto;
  overflow: hidden;
}
.bang{
  width: 100%;
  height: auto;
  overflow: hidden;
}
.ping{
  width: 100%;
  height: auto;
  overflow: hidden;
  margin: 20px 0;
}
.tupian{
  width: 100px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
  float: left;
  /* margin: 0 10px; */
}
.hhh{
  width: 100%;
  height: auto;
  overflow: hidden;
  font-size: 14px;

}
.fixe{
   width: 100%;
  height: auto;
  overflow: hidden;
  font-size: 14px;
}
.fixe image{
   width: 100%;
  height: auto;
  overflow: hidden;
  font-size: 14px;
  border: 1px solid #ddd;
}
.oning{
  width: 100%;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
}

3、js部分

 //图片上传
ppp: function(){
  var that=this;
  wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
      console.log(res);
      that.setData({
        tempFilePaths: res.tempFilePaths
      })
      //本地存储所选图片
      console.log(res.tempFilePaths[0]);
      shuju_.push(res.tempFilePaths[0]);
      console.log(shuju_);
      that.setData({
        shuju_: shuju_
      })
      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
      var tempFilePaths = res.tempFilePaths
    }
  })
},
 error: function(){
var that=this;
 that.setData({
 filePath: [],
 kang: 0,
 colot: "#333",
 kang_max: 0
 })
 },
//图片下载
 xianzhai: function(e){
    var that=this;
    console.log(e);
    const downloadTask = wx.downloadFile({
      url: e.currentTarget.dataset.url, //仅为示例，并非真实的资源
      success: function (res) {
        console.log(res)
        wx.playVoice({     
          filePath: res.tempFilePath
        })
        var fixe=[];
        fixe.push(res.tempFilePath);
        that.setData({
          colot: "#fff",
          filePath: fixe
        })
      }
    })

    downloadTask.onProgressUpdate((res) => {
      var that=this;
      console.log(res)
      that.setData({
        kang: res.progress*2,
        kang_max: res.progress
      });
      console.log('下载进度', res.progress)
      console.log('已经下载的数据长度', res.totalBytesWritten)
      console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
    })
    // var times=setInterval(function(){
    //   console.log("取消下载");
    //   downloadTask.abort();
    //   clearInterval(times);
    //   that.setData({
    //     filePath: [],
    //     kang: 1,
    //     kang_max: 0,
    //   })
    // },3000);
    // downloadTask.abort() // 取消下载任务

},