Django实战-小程序端图片上传

小团子

发布于 2019-09-03 18:42:39

2.3K0

发布于 2019-09-03 18:42:39

文章被收录于专栏：数据云团数据云团

Django实战-小程序端注销和获取状态

Django网络应用开发的5项基础核心技术包括模型（Model）的设计，URL 的设计与配置，View（视图）的编写，Template（模板）的设计和Form(表单)的使用。

在小程序端实现图片上传，需要调用小程序的图片上传接口。可以通过获取照片的本地文件路径，tempFilePath 可以作为 img 标签的 src 属性显示图片。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 需要上传的图片
    needUploadFiles: [],
  },
  // 选择图片上传
  chooseImage: function() {
    var that = this;
    wx.chooseImage({
      // 可以指定是原图还是压缩图，默认二者都有
      sizeType: ["original", "compressed"],
      // 可以指定来源是相册还是相机，默认二者都有
      sourceType: ["album", "camera"],
      success: function(res) {
        // 返回选定照片的本地文件路径列表，tempFilePath 可以作为 img 标签的 src 属性显示图片
        that.setData({
          needUploadFiles: that.data.needUploadFiles.concat(res.tempFilePaths)
        });
      },
    })
  },

  // 上传图片文件
  uploadFiles: function() {
    var that = this
    that.setData({
      newBackupedFiles: []
    })
    // 读取文件路径
    for (var i = 0; i < this.data.needUploadFiles.length; i++) {
      var filePath = this.data.needUploadFiles[i]
      wx.uploadFile({
        url: app.globalData.serverUrl + app.globalData.apiVersion + '/service/image',
        filePath: filePath,
        name: 'test',
        success: function(res) {
          // 取出文件的名字和 nmd5
          var res = JSON.parse(res.data)
          var md5 = res.data[0].md5
          var name = res.data[0].name
          var newImageItem = {
            "md5": md5,
            "name": name
          }
          that.downloadFile(newImageItem)
        }
      })
    }
    wx.showToast({
      title: '上传成功',
    })
    // 把上传的列表清空
    this.setData({
      needUploadFiles: []
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
  
  },
})