微信小程序 wx.uploadFile无法上传解决办法
微信小程序 wx.uploadFile无法上传解决办法
微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到。
我也因为一直不能解决，硬着头皮提交审核最后被拒（抱着审核者最好用iOS检测的心态，不巧审核我应用的用的是安卓），才尝试使用第三方的手段解决。
最终我是用了七牛第三方存储的方式，将文件直接上传至七牛的储存的空间上再回调使用。
当然像又拍云，万象优图这些第三方存储源都可以采用这种思路。
首先是将七牛的https上传域名放进小程序的域名名单中。
这里我使用的是七牛华东区的域名https://up.qbox.me。
微信小程序wx.uploadFile采用的是multipart/form-data方式上传，即表单上传。
根据七牛的官方文档说明 http://developer.qiniu.com/docs/ ... up/form-upload.html
主要需要的就是file（文件本身）和token（上传凭证）。
然后在服务端部署获取上传凭证的业务代码，通过wx.request请求获取token。
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)
}
})
具体如何部署七牛凭证代码，可参考http://78re52.com1.z0.glb.cloudd ... %9C%8D%E5%8A%A1.pdf
获得凭证后就可以通过wx.uploadFile上传了。具体代码为：
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)
}
})
最终采用这种方式解决了安卓无法上传文件的问题，当然上传自身服务器的问题还是有待解决。
不过对于急需解决方案的开发者还是提供了一个可行的方案。
现在利用第三方图源或存储源是一个普遍的方案，很多存储源例如七牛，又拍云，万象优图都提供了免费的空间供开发者使用。
建议大家也多做这方面的架构和尝试。
感谢阅读，希望能帮助到大家，谢谢大家对本站 的支持！
相关文章
这篇文章主要介绍了微信小程序图片宽100%显示并且不变形的相关资料,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了JavaScript构造函数与JavaScript原型，构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用，构造函数通过原型分配的函数是所有对象所共享的。下面来看看文章的集体介绍内容吧2021-12-12
这篇文章主要为大家介绍了前端自动化测试之Jest 进阶教程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
js 交互在Flutter 中使用 webview_flutter
这篇文章主要为大家介绍了js 交互在Flutter 中使用 webview_flutter示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要为大家介绍了JS按钮连击和接口调用频率限制防止客户集体爆仓详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了微信小程序 wx.request(接口调用方式)详解及实例的相关资料，wx.request请求方式比较简单,但是在使用的时候出现错,这里就记录下，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了实现一个简单得数据响应系统，文章介绍的数据响应系统会用到Dep，其实，这就是一个依赖收集的容器， depend 收集依赖， notify 触发依赖，下面来看看详细的内容结介绍,需要的朋友可以参考一下2021-11-11
一说到JavaScript的数组，大家基本都能马上想起pop()、push()、shift()、unshift()、indexof()等等，今天小编就给大家分享几个开发中常用的js数组方法即他们的用法。需要的朋友可以参考下面文章的具体内容2021-09-09
这篇文章主要介绍了微信小程序 input输入及动态设置按钮的实现的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-10-10
这篇文章主要总结介绍了JS如何获取对象属性名的方法,需要的朋友可以参考下2022-01-01
最新评论