Detailed explanation of the solution to the problem of being unable to upload when developing WeChat mini programs

This article describes the solution to the problem of being unable to upload when developing WeChat mini programs. If you don’t know the solution to the problem of being unable to upload when developing WeChat mini programs, or if you are interested in the solution to being unable to upload when developing WeChat mini programs, then Let’s take a look at this article together. Okay, without further ado, let’s get to the point!

WeChat applet wx.uploadFile cannot upload solution

Many developers have encountered the problem that the WeChat Android client cannot use wx.uploadFile to upload files.

I also couldn’t solve it, so I submitted it to review and was rejected in the end (with the mentality that it is best for reviewers to use iOS testing, it happened to review the use of my app) (for Android), I tried to use third-party means to solve it.

In the end, I used Qiniu’s third-party storage method, uploading files directly to Qiniu’s storage space and then calling back for use.

Of course, third-party storage sources such as Youpaiyun and Wanxiang Youtu can adopt this idea.

The first step is to put Qiniu’s https upload domain name into the mini program’s domain name list.

Here I am using the domain name of Qiniu East China https://up.qbox.me.

WeChat applet wx.uploadFile uses the multipart/form-data method to upload, that is, form upload.

According to Qiniu’s official document description http://developer.qiniu.com/docs/ ... up/form-upload.html

The main things needed are file (the file itself) and token (upload certificate).

Then deploy the business code to obtain the uploaded credentials on the server side, and obtain the token through wx.request request.

var that = this;
 
wx.request({
 
 url: 'https://xxx/token',
 
 method: 'POST',
 
 data: {},
 
 header: {
 
  'content-type':'application/x-www-form-urlencoded'
 
 },
 
 success: function(res) {
 
   that.token = res.data; //默认返回一个token，赋值给已经有的token属性。这里只是示例，具体根据需求可自行设定。
 
 },
 
 fail:function (res) {
 
  console.log(res)
 
 }
 
})

For details on how to deploy the Qiniu voucher code, please refer to http://78re52.com1.z0.glb.cloudd... %9C%8D%E5%8A%A1.pdf

After obtaining the certificate, you can upload it through wx.uploadFile. The specific code is:

var that = this;
 
 var key = Math.random().toString(36).substr(2); //生成一个随机字符串的文件名
 
 wx.uploadFile({
 
  url: 'https://up.qbox.me',
 
  filePath: flie,
 
  name: 'file',
 
  formData:{
 
   'token': that.token,//刚刚获取的上传凭证
 
   'key': key//这里是为文件设置上传后的文件名
 
  },
 
  success: function(r){
 
   var data = r.data;//七牛会返回一个包含hash值和key的JSON字符串
 
   if(typeof data==='string')data = JSON.parse(data.trim());//解压缩
 
   if(data.key){
 
    ... //这里就可以直接使用data.key，文件已经上传成功可以使用了。如果是图片也可以直接通过image调用。
 
   }
 
  },
 
  fail:function (res) {
 
   console.log(res)
 
  }
 
 })

This method was finally used to solve the problem of Android being unable to upload files. Of course, the problem of uploading its own server still needs to be solved.

However, it still provides a feasible solution for developers who are in urgent need of solutions.

Nowadays, it is a common solution to use third-party image sources or storage sources. Many storage sources such as Qiniu, Youpaiyun, and Wanxiang Youtu provide free space for developers to use.

It is recommended that everyone also do more structure and attempts in this area.

related suggestion:

Detailed explanation of Post request in WeChat applet development

Detailed explanation of WeChat applet implementation of pull-down loading and pull-up refresh

The above is the detailed content of Detailed explanation of the solution to the problem of being unable to upload when developing WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!