1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序前端使用又拍云存储上传图片

微信小程序前端使用又拍云存储上传图片

时间:2019-08-24 05:53:18

相关推荐

微信小程序前端使用又拍云存储上传图片

目录

一、前端引用二、优化调整

一、前端引用

参考链接:又拍云小程序sdk。

引用sdk.js文件到目录中,这里代码不需要改动。

function Upyun (options) {this.bucket = options.bucketthis.operator = options.operatorthis.getSignatureUrl = options.getSignatureUrl}Upyun.prototype.upload = function (options) {var self = thisif (!options.remotePath) {options.remotePath = options.localPath.split('//')[1]}var date = (new Date()).toGMTString()var opts = {'save-key': options.remotePath,bucket: self.bucket,expiration: Math.round(new Date().getTime() / 1000) + 3600,date: date}var policy = Base64.encode(JSON.stringify(opts))var data = [ 'POST', '/' + self.bucket, date, policy ].join('&')self.getSignature(data, function (err, signature) {if (err) {options.fail && options.fail(err)plete && plete(err)return}wx.uploadFile({url: `https://v0./${self.bucket}`,filePath: options.localPath,name: 'file',formData: {authorization: `UPYUN ${self.operator}:${signature}`,policy: policy},success: options.success,fail: options.fail,complete: plete})})}Upyun.prototype.getSignature = function (data, cb) {wx.request({url: this.getSignatureUrl,data: {data: data},success: function (res) {cb(null, res.data.signature)},fail: function (err) {cb(err)}})}/* eslint-disable */var Base64 = {// private property_keyStr: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',// public method for encodingencode: function (input) {var output = ''var chr1, chr2, chr3, enc1, enc2, enc3, enc4var i = 0input = Base64._utf8_encode(input)while (i < input.length) {chr1 = input.charCodeAt(i++)chr2 = input.charCodeAt(i++)chr3 = input.charCodeAt(i++)enc1 = chr1 >> 2enc2 = ((chr1 & 3) << 4) | (chr2 >> 4)enc3 = ((chr2 & 15) << 2) | (chr3 >> 6)enc4 = chr3 & 63if (isNaN(chr2)) {enc3 = enc4 = 64} else if (isNaN(chr3)) {enc4 = 64}output = output +this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4)}return output},// public method for decodingdecode: function (input) {var output = ''var chr1, chr2, chr3var enc1, enc2, enc3, enc4var i = 0input = input.replace(/[^A-Za-z0-9\+\/\=]/g, '')while (i < input.length) {enc1 = this._keyStr.indexOf(input.charAt(i++))enc2 = this._keyStr.indexOf(input.charAt(i++))enc3 = this._keyStr.indexOf(input.charAt(i++))enc4 = this._keyStr.indexOf(input.charAt(i++))chr1 = (enc1 << 2) | (enc2 >> 4)chr2 = ((enc2 & 15) << 4) | (enc3 >> 2)chr3 = ((enc3 & 3) << 6) | enc4output = output + String.fromCharCode(chr1)if (enc3 != 64) {output = output + String.fromCharCode(chr2)}if (enc4 != 64) {output = output + String.fromCharCode(chr3)}}output = Base64._utf8_decode(output)return output},// private method for UTF-8 encoding_utf8_encode: function (string) {string = string.replace(/\r\n/g, '\n')var utftext = ''for (var n = 0; n < string.length; n++) {var c = string.charCodeAt(n)if (c < 128) {utftext += String.fromCharCode(c)} else if ((c > 127) && (c < 2048)) {utftext += String.fromCharCode((c >> 6) | 192)utftext += String.fromCharCode((c & 63) | 128)} else {utftext += String.fromCharCode((c >> 12) | 224)utftext += String.fromCharCode(((c >> 6) & 63) | 128)utftext += String.fromCharCode((c & 63) | 128)}}return utftext},// private method for UTF-8 decoding_utf8_decode: function (utftext) {var string = ''var i = 0var c = c1 = c2 = 0while (i < utftext.length) {c = utftext.charCodeAt(i)if (c < 128) {string += String.fromCharCode(c)i++} else if ((c > 191) && (c < 224)) {c2 = utftext.charCodeAt(i + 1)string += String.fromCharCode(((c & 31) << 6) | (c2 & 63))i += 2} else {c2 = utftext.charCodeAt(i + 1)c3 = utftext.charCodeAt(i + 2)string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63))i += 3}}return string}}/* eslint-enable */module.exports = Upyun

在需要的界面引入Upyun类,这里一般配合微信中的wx.chooseImage使用。

import Upyun from './upyun'//引入jsconst upyun = new Upyun({bucket: 'img',//又拍云空间名operator: 'aaa',//又拍云中相应操作人员名称getSignatureUrl: 'http://.../api',//接口地址})upyun.upload({localPath: tempFilePaths,//文件路径,这里可以使用wx.chooseImage返回的路径remotePath: '/img',//又拍云存储的路径success: function(res) {console.log(res);}})

二、优化调整

1、微信的wx.chooseImage可以单独封装成一个引用函数,将上传方法插入wx.chooseImage返回函数中,这一依个人习惯设定。

2、remotePath: ‘/img’,文件目录可引用当前时间,便于清晰查看管理。

let date = new Date;let year = date.getFullYear();let month = date.getMonth() + 1;let day = date.getDate(); let remotePath = '/' + year + '/' + month + '/' + day;

remotePath: ‘/img’+ remotePath +’/{filemd5}’,{filemd5}为图片md5值,又拍云会自行处理不用进行操作。另外还可以参考,路径封装方法2。

3、upload方法返回的res为图片在又拍云的相对路径,所以这里若想直接使用路径查看图片须进行路径拼接。

let imgurl = JSON.parse(res.data)//upload返回的res,这里返回的数据需做一下数据处理imgurl = config['imgurl'] + imgurl.url//拼接config中的前边域名路径

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。