首頁  >  文章  >  後端開發  >  微信小程式開發遇到無法上傳解決方法詳解

微信小程式開發遇到無法上傳解決方法詳解

韦小宝
韦小宝原創
2018-03-14 17:00:0810312瀏覽

這篇文章講述了微信小程式開發遇到無法上傳解決辦法,大家對微信小程式開發遇到無法上傳解決辦法不了解的話或對微信小程式開發遇到無法上傳解決辦法感興趣的話那麼我們就一起來看看本篇文章吧, 好了廢話少說進入正題吧!

微信小程式 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)
 
  }
 
 })

最終採用這種方式解決了安卓無法上傳檔案的問題,當然上傳自身伺服器的問題還是有待解決。

不過對於急需解決方案的開發者還是提供了一個可行的方案。

現在利用第三方圖源或儲存來源是一個普遍的方案,許多儲存來源例如七牛,又拍雲,萬象優圖都提供了免費的空間供開發者使用。

建議大家也多做這方面的架構和嘗試。

相關推薦:

#

微信小程式開發中的Post請求詳解

#微信小程式實作下拉載入和上拉刷新詳細講解

#

以上是微信小程式開發遇到無法上傳解決方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn