微信小程序 - 前臺接入七牛雲上傳圖片和視頻

相信小程序開發者在開發過程當中都會遇到上傳代碼包遇到大小限制這個問題，由於微信如今規定代碼不能超過 2 MB 大小，但咱們實際開發過程當中不免會有業務需求要使用一些圖片和視頻等媒體文件，這樣的話會致使上傳代碼包大小超過限制沒法發佈，因此開發者須要將須要的一些媒體數據上傳到雲端進行存儲，這樣就解決了這樣一個小問題了。固然也可使用微信推出的另外一個技術分包加載也許也能解決這個問題，這裏不細說了，先分享下前臺如何接入七牛吧。

一、註冊七牛七牛帳號，實名認證以後，找到本身我的中心的 AccessKey/SecretKey 在後臺配置這兩個參數，由於須要前端調用後臺接口，後臺返回給前端七牛 token 以後，拿到 token 令牌才能夠完成上傳操做這是必須的。

二、下載七牛提供的 sdk 文件 qiniuUploader.js 導入到項目中，並在使用它的頁面上引入 js 文件。

下載地址 ：https://developer.qiniu.com/sdk#community-sdk

const qiniuUploader = require("../../utils/qiniuUploader");

三、小程序配置域名信息

登陸微信公衆平臺 --> 設置 --> 開發設置 --> 服務器域名

四、以上都準備好就能夠完成上傳操做了，直接上代碼

初始化七牛參數

const qiniuUploader = require("../../utils/qiniuUploader");
const app = getApp()
var url = app.globalData.url
// 初始化七牛相關參數
function initQiniu(res) {
  var options = {
    region: 'SCN', // 華南
    // ECN, SCN, NCN, NA, ASG，分別對應七牛的：華東，華南，華北，北美，新加坡 5 個區域
    uptoken: res.uptoken,
    // uptokenURL: 'https://[yourserver.com]/api/uptoken',
    // uptoken: 'xxxx',
    domain: 'bzkdlkaf.bkt.clouddn.com', // bucket 域名，下載資源時用到。若是設置，會在 success callback 的 res 參數加上能夠直接使用的 ImageURL 字段。不然須要本身拼接。
    shouldUseQiniuFileName: false
  };
  qiniuUploader.init(options);
}

得到七牛 token 在後臺別忘了引入相應的七牛工具包

import com.qiniu.util.Auth;

@Controller
@RequestMapping(value = "/qiniu")
public class QiniuToken {
	// 獲取token
	@RequestMapping(value = "/getToken")
	public @ResponseBody Map<String, String> getToken() throws IOException {
		String accessKey = "xxx";
	        String secretKey = "xxx";
	        String bucket = "xxx";
		Auth auth = Auth.create(accessKey, secretKey);
		String upToken = auth.uploadToken(bucket);
		Map<String, String> map = new HashMap<String, String>();
		map.put("uptoken", upToken);
		return map;
	}
}

上傳操做，好比此時我要上傳一張 logo 圖片，邏輯是這樣的：首先請求後臺拿到 token 以後，初始化七牛，調用七牛方法，傳入圖片臨時路徑上傳到七牛， 最後把這個完整的圖片地址再次傳送給後臺，一切完美解決 。

/**
   * 表單提交
   */
  formSubmit: function (e) {
    var companyLogoimg = e.detail.value.companyLogoimg
    // 存logo
    wx.request({
      url: url + "qiniu/getToken",
      data: {},
      success: function (result) {
        console.log("初始化七牛返回token:", result);//token: 後端返回的上傳驗證信息
        //存logo
        initQiniu(result.data);
        qiniuUploader.upload(companyLogoimg, (res) => {
          //對象存儲中外鏈默認域名 http://p2mksxx.bkt.clouddn.com/
          var logo = "http://p2mksxx.bkt.clouddn.com/" + res.key //最後把這個完整的圖片地址再次傳送給後臺
          //存form表單公司詳情數據
          wx.request({
            url: url + "wedoCompany/save",
            method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
            header: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
            data: {
              id: id,
              logo: logo,
            },
            success: function (res) {
               wx.showModal({
                title: '提示',
                showCancel: false,
                confirmText: "我知道了",
                content: '提交成功',
                success: function (res) {
                  // wx.navigateBack({
                  //   delta: 1
                  // })
                }
              })
            }
          })
        }, (error) => {
          console.error('error: ' + JSON.stringify(error));
        });
      }
    })
  },

根據以上步驟能夠簡單實現了前端上傳圖片到七牛雲，開發中能夠根據本身業務需求進行開發，代碼雖 low 就當拋磚引玉分享給你們，期待你有更好的 idea 一塊兒分享。

 

水平有限，如有問題請留言交流！

互相學習，共同進步 ：） 轉載請註明出處謝謝！