微信小程序-文件上传功能

整理不易，如果您觉得对您有所帮助 请点赞支持下~谢谢

实现功能展示：

 

点击‘+’号按钮，选择要上传的图片，点击红×（或者图片）取消选中

   

输入文件编码，点击文件上传，文件上传至“文件管理”

 

WXML文件：

<!--pages/picture/picture.wxml-->
<text>pages/picture/picture.wxml</text>
<button bindtap="ChooseImageFile">选择图片(以File形式存储在39)</button>

JS文件：

  // 39File形式上传
  ChooseImageFile() {
    wx.chooseImage({
      count: 9,
      success: (res) => {
        var tempFilePaths = res.tempFilePaths; // 图片存入本地临时文件路径
        this.upload(tempFilePaths);
      },
    });
  },

  upload(tempFilePaths) {
    let token = wx.getStorageSync("token39");
    console.log("39文件上传token: " + token);
    tempFilePaths.forEach(function (filePath) {
      wx.uploadFile({
        filePath: filePath,
        name: "file",
        url: "http://39.101.64.198:8050/htsys/md/mdfileinfo/upload",
        header: {
          "Content-Type": "multipart/form-data",
          token: token,
        },
        formData: {
          sysid: "ae3bcb02291d4ea7aa49043d3d800d03",
        },
        success: (res) => {
          console.log(res);
        },
        fail: (res) => {
          console.log(res);
        },
      });
    });
  },

 

配置文件上传域名：

  在开发微信小程序文件上传的功能时，发现在本地调试是可以上传成功的，但是发布成测试版本以后，就无法正常上传了，查阅了相关文档以后，发现是要配置上传文件的域名地址

如下所示：

配置域名

https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=421619738&lang=zh_CN

开发 -> 开发管理 -> 服务器域名配置

详情 项目配置 中可以看到

 

上传文件配置域名