【Kevin Learn 小程序】--＞上传和下载

上传

属性

参考：上传

实例

1. config.js

/**
 * 小程序配置文件
 */
var config = {
  // 上传文件接口
  uploadFileUrl: `http://127.0.0.1:3003/upload`,

  // 下载文件接口
  downloadFileUrl: `https://11.url.cn/now/h5/img/red_62ae947.png`
};

module.exports = config

2. upload.js

const uploadFileUrl = require('../../config').uploadFileUrl

Page({
  chooseImage: function () {
    var self = this

    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album'],
      success: function (res) {
        console.log('chooseImage success, temp path is', res.tempFilePaths[0])

        var imageSrc = res.tempFilePaths[0]

        var uploadTask = wx.uploadFile({
          url: uploadFileUrl,
          filePath: imageSrc,
          name: 'data',
          success: function (res) {
            console.log('uploadImage success, res is:', res)

            wx.showToast({
              title: '上传成功',
              icon: 'success',
              duration: 1000
            })

            self.setData({
              imageSrc
            })
          },
          fail: function ({ errMsg }) {
            console.log('uploadImage fail, errMsg is', errMsg)
          }
        });
        uploadTask.onProgressUpdate((res) => {
          console.log('上传进度', res.progress)
          console.log('已经上传的数据长度', res.totalBytesSent)
          console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
        });
      },
      fail: function ({ errMsg }) {
        console.log('chooseImage fail, err is', errMsg)
      }
    })
  }
})

3. upload.json

{
  "navigationBarTitleText": "上传文件"
}

4. upload.wxml

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-body-info">

        <block wx:if="{{imageSrc}}">
          <image src="{{imageSrc}}" class="image" mode="aspectFit"></image>
        </block>

        <block wx:else>
          <view class="image-plus image-plus-nb" bindtap="chooseImage">
            <view class="image-plus-horizontal"></view>
            <view class="image-plus-vertical"></view>
          </view>
          <view class="image-plus-text">选择图片</view>
        </block>

      </view>
    </view>
  </view>
</view>

5. upload.wxss

.image {
  width: 100%;
  height: 360rpx;
}
.page-body-info {
  display: flex;
  box-sizing: border-box;
  padding: 30rpx;
  height: 420rpx;
  border-top: 1rpx solid #D9D9D9;
  border-bottom: 1rpx solid #D9D9D9;
  align-items: center;
  justify-content: center;
}

下载

效果图

属性

参考：下载

实例

1. config.js

//app.js
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})

2. download.js

const downloadFileUrl = require('../../config').downloadFileUrl

Page({
  downloadImage: function () {
    var self = this

    var downloadTask = wx.downloadFile({
      url: downloadFileUrl,
      success: function (res) {
        console.log('downloadFile success, res is', res)

        self.setData({
          imageSrc: res.tempFilePath
        })
      },
      fail: function ({ errMsg }) {
        console.log('downloadFile fail, err is:', errMsg)
      }
    });
    downloadTask.onProgressUpdate((res) => {
      console.log('下载进度', res.progress)
      console.log('已经下载的数据长度', res.totalBytesWritten)
      console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
    })
  }
})

3. download.json

{
  "navigationBarTitleText": "下载文件"
}

4. download.wxml

<view class="container">
  <view class="page-body">
    <image wx:if="{{imageSrc}}" src="{{imageSrc}}" mode="center" />
    <block wx:else>
      <view class="page-body-wording">
        <text class="page-body-text">
          点击按钮下载服务端示例图片
        </text>
      </view>
      <view class="btn-area">
        <button bindtap="downloadImage" type="primary">下载</button>
      </view>
    </block>
  </view>
</view>

5. download.wxss

.page-body image {
  width: 600rpx;
  height: 600rpx;

  margin: 0 75rpx;
}