小程序--剖析小程序上传文件

时间：2024-01-23 07:00:12

前言

小程序开发的过程中，如果你涉及到文件的上传，就需要使用微信提供的API去上传文件：

wx.uploadFile()

官方文档的解释这里就不多介绍了，主要看一下这个方法具体如何使用以及为什么这样使用。

正文

我们可以先看一下该API的参数说明：

其实wx.uploadFile的操作是你把要请求的数据以及要请求的服务器URL传递给微信服务器，微信服务器再拿着这些数据进行三方服务器请求。具体可参见下图：(根据自己的理解画的，如果不对，欢迎指正)

所以url也就是我们平时自己去请求我们自己的服务器接口的地址，如果你的服务器需要校验session或者token，你可以在formData中添加，例如把需要的uid放到里面：

 var formData = {
        uid: app.globalData.uid,
        sessionKey: wx.getStorageSync("SESSIONKEY")
      };

 

function upLoadFile(url, filePath, name, formData, success, fail) {
  
  wx.uploadFile({
    url: url,
    filePath: filePath,
    name: name,
    header: {
      \'content-type\': \'multipart/form-data\'
    },
    formData:formData,    //请求额外的form data
    success:function(res) {
      console.log(res);
      if(res.statusCode ==200){
       typeof success == "function" && success(res.data);
      }else{
      typeof fail == "function" && fail(res.data);
      }
    },
    fail: function (res) {
      console.log(res);
      typeof fail == "function" && fail(res.data);
    }
  })
}

我这里直接对上传文件进行了封装，微信服务器通过我们给他的数据向我们的服务器发送数据请求，请求成功后，微信服务器会对我们自己的服务器返回的信息进行包装，放到res.data里面，这样我们就可以直接从res.data中获取到我们的服务器给我们反馈的信息了。 

 

为什么要这么做？而不是直接由我们向自己的服务器发送请求呢？

 常规来说，我们直接调用我们自己服务器的接口，然后我们自己的服务器返回数据小程序端即可。但是从uploadFile操作来说，其实是微信服务器把自己当做了中转站，所有的发送都要通过微信中转进行操作。个人觉得这样做的原因如下：

1.微信服务器有自己的一套临时图片链接，对于我们自己的服务器而言无法识别。

2.鉴于安全考虑，微信服务器会对图片进行留存，保证内容在微信平台上的合法性。

 

如果有其他的原因，也可以留言！我也在微信小程序开发中心做了提问，最新信息可以参见这里。

 

 

参考文档

1.网络请求

相关文章