微信小程序之文件和图片的上传

微信小程序能够很好的支持图片的选取和上传，但是对于文件类型，只支持从聊天中选取并上传，也算勉强满足了需求，以下就是两种不同方式的上传。

一. 图片选择上传

wxml 代码:

<view class="image-picture">
   <i-avatar i-class="image-size" src="{{photo}}" bindtap="changeImage"></i-avatar>
   <view class="edit-image" bindtap="changeImage">编辑头像</view>
</view>

js 代码：

changeImage: function (e) {
    var that = this;
    console.log("点击编辑图片");
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        my.uploadFile(that, tempFilePaths, 0);
      }
    })
  }

二. 文件选择上传

wxml 代码:

<text class="attachment" bindtap="uploadFile">{{attachment}}</text>

js 代码：

  uploadFile: function (e) {
    var that = this;
    console.log("点击上传文件");
    wx.chooseMessageFile({
      count: 1,
      type: "file",
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFiles;
        my.uploadFile(that, 1);
      }
    })
  }

代码中使用的 my.uploadFile 是通用上传服务类中的方法，需要在头部导入 MyModel 才能使用：

import {
  MyModel
} from "../../../services/myModel.js";
const my = new MyModel();

三. 通用上传服务类

myModel.js

class MyModel {
  /**
   * 上传图片/文件
   */
  uploadFile(page, path, type) {
    let filePath = "";
    let fileName = "";
    // 0-图片；1-文件；
    let params = {
      'type': type
    };
    // 上传图片
    if (type == 0) {
      filePath = path[0];
    } else if (type == 1) {
      filePath = path[0].path;
      fileName = path[0].name;
      params.fileName = fileName;
    }
    wx.showToast({
        icon: "loading",
        title: "正在上传文件"
    }),
    wx.uploadFile({
        url: api_base_url + "/uploadFile",
        filePath: filePath,
        name: 'file',
        header: {
          "Content-Type": "multipart/form-data"
        },
        formData: params,
        success: function (res) {
          if (res.statusCode != 200) {
            wx.showModal({
              title: '提示',
              content: '文件或图片上传失败',
              showCancel: false
            });
            return;
          }
          let receivedata = JSON.parse(res.data);
          if (receivedata.data.state == "fail") {
            wx.showModal({
              title: '提示',
              content: '上传失败',
              showCancel: false
            })
            return;
          }
          if (type == 0) {
            page.setData({
              //上传成功修改显示图片(filePath 是临时生成用于显示的图片，imagePath 是后端存储的相对路径)
              photo: filePath,
              imagePath: receivedata.data.filePath
            })
          } else if (type == 1) {
            let fileName = receivedata.data.fileName;
            // 文件名称截取
            if (fileName) {
              if (fileName.length > 15) {
                fileName = fileName.substr(0, 15) + "...";
              }
            }
            page.setData({
              //上传成功修改文件名显示
              attachment: fileName
            })
          }
        },
        fail: function (e) {
          wx.showModal({
            title: '提示',
            content: '文件上传失败',
            showCancel: false
          })
        },
        complete: function () {
          wx.hideToast();
        }
      })
  }
}

export {
  MyModel
}

其他微信小程序相关博客：

微信小程序 自定义组件和父子组件的传参

微信小程序之实现隔行变色表格

微信小程序之 swiper 的 tab 选项卡高度自适应问题解决方案

微信小程序登录流程（自定义账号绑定功能）

微信小程序之 如何添加背景图片 & 包大小超限解决方案