用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

1

主题

71

帖子

926

积分

诠释者

Rank: 4

积分
926
2016-12-13 23:53:53 thirdx3乐于助人 优秀会员纪念 诠释者 楼主 75565
微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到。
我也因为一直不能解决,硬着头皮提交审核最后被拒(抱着审核者最好用iOS检测的心态,不巧审核我应用的用的是安卓),才尝试使用第三方的手段解决。

最终我是用了七牛第三方存储的方式,将文件直接上传至七牛的储存的空间上再回调使用。
当然像又拍云,万象优图这些第三方存储源都可以采用这种思路。

首先是将七牛的https上传域名放进小程序的域名名单中。
这里我使用的是七牛华东区的域名https://up.qbox.me

微信小程序wx.uploadFile采用的是multipart/form-data方式上传,即表单上传。

根据七牛的官方文档说明 http://developer.qiniu.com/docs/ ... up/form-upload.html
QQ截图20161213232816.png
主要需要的就是file(文件本身)和token(上传凭证)。

然后在服务端部署获取上传凭证的业务代码,通过wx.request请求获取token。
[JavaScript] 纯文本查看 复制代码
      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上传了。具体代码为:
[JavaScript] 纯文本查看 复制代码
    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)
      }
    })



最终采用这种方式解决了安卓无法上传文件的问题,当然上传自身服务器的问题还是有待解决。
不过对于急需解决方案的开发者还是提供了一个可行的方案。

现在利用第三方图源或存储源是一个普遍的方案,很多存储源例如七牛,又拍云,万象优图都提供了免费的空间供开发者使用。
建议大家也多做这方面的架构和尝试。

评分

参与人数 1原创 +1 浮云 +30 收起 理由
天下雪 + 1 + 30 优质填坑

查看全部评分

似乎填了一个超级大坑,强力支持一下;uploadfile问题到今天,是所有坑里最坑的一个坑,包括downfile;安卓无法上传,论坛也有很多人提了,就是无人能够给出解决方案,感谢楼主提出了一个参考方案。
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
我想知道你是不是一张一张上传的?串行的。求解答
Charming 发表于 2016-12-30 16:06
我想知道你是不是一张一张上传的?串行的。求解答

小程序里的图片最好一张张上传,并行容易回掉时出错。
直接用递归调用上传的函数即可
2017-1-5 02:01:53 rachis 架构狮
5#
实测七牛的API,可以使用,不过有几个地方需要注意的:
1、需要另外在自己的服务器上调用文件生成token,这个我直接下载了php的sdk,再精简到只输出token就行了
2、token,有过期时间,不过看到有一个参数3600秒,有可能可以设置大一些,一天?一个月?一年?十年?
3、开发工具上调试的时候,会容易出现uploadFile:fail 网络错误 statusCode : 400,其实如果你用真机调试,就会看到真实的错误信息,一般都是token问题,或者请求的api网址https://up.qbox.me不对。
4、在七牛上开通的不同区域的存储,https://up.qbox.me这个网址是不同的,我就是一直报网络错误400,找不到原因后来才解决
5、我用华南的存储,最后用的api网址是这个,https://up-z2.qbox.me
6、图片都是单次调用上传,接口反应很快。
7、七牛上图片的外链看到的是http,非https,需要另外申请免费的ssl,绑定https域名才可以

评分

参与人数 1原创 +1 浮云 +10 收起 理由
天下雪 + 1 + 10 很给力!

查看全部评分

rachis 发表于 2017-1-5 02:01
实测七牛的API,可以使用,不过有几个地方需要注意的:
1、需要另外在自己的服务器上调用文件生成token,这 ...

恩,基本就是你说的这样。

token是通过phpsdk算出,通过wx.request获取,再保存在缓存里随时使用。七牛最大的时间限制是3600秒,所以写进缓存是一定要加时间。使用时先验证一边,如果过期了需要重新获取。

我使用的华东这个网址https://up.qbox.me倒是一直很稳定,开发工具和小程序里都还没出现你说的问题。有可能跟网络地区也有关系。

七牛里的图片可以直接使用http调用,就跟普通网络图片调用一样。如果要使用SSL的话,七牛现在也在提供免费的SSL,直接申请就可以。不过我不是很建议图片用HTTPS调用,因为整个流量时不计入免费流量的。我也只是使用wx.request获取图片信息和下载七牛上文件时才走的HTTPS线路。
又拍云是怎么处理的?我试了一下成功不了
本帖最后由 igooda 于 2017-7-19 18:09 编辑

请问楼主,我出现了一个奇怪的问题。本地开发,微信-调试模式中,上传OK,关闭调试后,就没有反应也看不到错误了,请问:大致会是什么问题引起的呢?是否有踩过坑呀?
代码中对 fail 也进行了捕捉,不能够弹出信息。七牛地址是:https://up-z1.qbox.me
在小程序配置中也添加了这个域名。
也开启了校验域名。
在微信中打开该域名也是正常的。
代码如下:
[JavaScript] 纯文本查看 复制代码
wx.uploadFile({
                    url: up_urls,
                    filePath: v.filepath,
                    name: 'file',
                    formData: {
                        key: key,
                        token: up_token
                    },
                    success: function (upres) {
                        var upresdata = upres.data;
                        if (typeof upresdata == 'string') {
                            upresdata = JSON.parse(upresdata);
                        }
                        v.uploaded = true;
                        v.url = upresdata.name;
                        // _this.setData({ uploaded_files: uploaded_files });
                        _this.send_cost();
                    },
                    fail: function (upres) {
                        wx.showModal({title: upres, showCancel: false});
                        wx.showModal({title: upres.data, showCancel: false});
                        v.uploaded = 'error';
                    },
                    complete: function ( upres ) {
                        wx.showModal({title: upres, showCancel: false});
                        wx.showModal({title: upres.data, showCancel: false});
                    }
                })


发新帖
您需要登录后才可以回帖 登录 | 立即注册