微信小程序使用七牛云对象存储保存图片和文件

module.exports = {

init: init,

upload: upload,

}

// 在整个程序生命周期中，只需要 init 一次即可

// 如果需要变更参数，再调用 init 即可

function init(options) {

config = {

qiniuRegion: ‘’,

qiniuImageURLPrefix: ‘’,

qiniuUploadToken: ‘’,

qiniuUploadTokenURL: ‘’,

qiniuUploadTokenFunction: null

};

updateConfigWithOptions(options);

}

function updateConfigWithOptions(options) {

if (options.region) {

config.qiniuRegion = options.region;

} else {

console.error(‘qiniu uploader need your bucket region’);

}

if (options.uptoken) {

config.qiniuUploadToken = options.uptoken;

} else if (options.uptokenURL) {

config.qiniuUploadTokenURL = options.uptokenURL;

} else if (options.uptokenFunc) {

config.qiniuUploadTokenFunction = options.uptokenFunc;

}

if (options.domain) {

config.qiniuImageURLPrefix = options.domain;

}

}

function upload(filePath, fileName, success, fail, options) {

if (null == filePath) {

console.error(‘qiniu uploader need filePath to upload’);

return;

}

if (options) {

init(options);

}

if (config.qiniuUploadToken) {

doUpload(filePath, fileName,success, fail, options);

} else if (config.qiniuUploadTokenURL) {

getQiniuToken(function () {

doUpload(filePath, fileName, success, fail, options);

});

} else if (config.qiniuUploadTokenFunction) {

config.qiniuUploadToken = config.qiniuUploadTokenFunction();

} else {

console.error(‘qiniu uploader need one of [uptoken, uptokenURL, uptokenFunc]’);

return;

}

}

function doUpload(filePath, fileName, success, fail, options) {

var url = uploadURLFromRegionCode(config.qiniuRegion);

var formData = {

‘token’: config.qiniuUploadToken,

‘key’: fileName

};

wx.uploadFile({

url: url,

filePath: filePath,

name: ‘file’,

formData: formData,

success: function (res) {

var dataString = res.data

var dataObject = JSON.parse(dataString);

//do something

var imageUrl = config.qiniuImageURLPrefix + dataObject.key;

dataObject.imageURL = imageUrl;

//console.log(dataObject);

if (success) {

success(dataObject);

}

},

fail: function (error) {

console.log(error);

if (fail) {

fail(error);

}

}

})

}

function getQiniuToken(callback) {

wx.request({

url: config.qiniuUploadTokenURL,

success: function (res) {

var token = res.data.uptoken;

config.qiniuUploadToken = token;

if (callback) {

callback();

}

},

fail: function (error) {

console.log(error);

}

})

}

function uploadURLFromRegionCode(code) {

var uploadURL = null;

switch (code) {

case ‘ECN’: uploadURL = ‘https://up.qbox.me’; break;

case ‘NCN’: uploadURL = ‘https://up-z1.qbox.me’; break;

case ‘SCN’: uploadURL = ‘https://up-z2.qbox.me’; break;

case ‘NA’: uploadURL = ‘https://up-na0.qbox.me’; break;

default: console.error(‘please make the region is with one of [ECN, SCN, NCN, NA]’);

}

return uploadURL;

}

})();

3、创建一个config.js文件，用于保存七牛云配置信息，代码如下：

module.exports = {

/*

• 由于签名计算放在前端会暴露 AccessKey 和 SecretKey

• 我们把签名计算过程放在后端实现，前端通过 ajax 向后端获取签名结果，

• 正式部署时请在后端加一层自己网站本身的权限检验。

*/

uptokenURL: ‘https://后端域名/getUptoken.html’,//后端获取签名

domain: ‘http://xxx.bkt.clouddn.com/’,//空间域名（融合CDN域名）

Region: ‘SCN’, //所属地域（华南）

};

七牛云的存储对象的地区对应表

存储区域	区域代码	客户端上传地址
华东	ECN	https://up.qbox.me
华北	NCN	https://up-z1.qbox.me
华南	SCN	https://up-z2.qbox.me
北美	NA	https://up-na0.qbox.me

五、index.wxml代码：

六、index.wxss代码：

.container{

padding: 20rpx;

}

.images-item{

width: -webkit-calc(50% - 10px);

width: -moz-calc(50% - 10px);

width: calc(50% - 10px);

float: left;

border-radius: 7px;

margin: 5px;

background: #fff;

}

.img-box {

display: flex;

justify-content: center;

}

七、index.js代码：

//获取应用实例

const app = getApp()

const qiniuUploader = require(‘./libs/qiniuUploader’)

const config = require(‘./libs/config’);

// 初始化七牛相关参数

function initQiniu() {

var options = {

region: config.Region, // 所属地址

uptokenURL: config.uptokenURL, //后端获取token

domain: config.domain, //空间域名（融合CDN域名）

};

qiniuUploader.init(options);

}

Page({

/**

• 页面的初始数据

*/

data: {

fileList: [],

date: ‘’

},

/**

• 生命周期函数–监听页面加载

*/

onLoad: function(options) {

//获取时间，作为图片文件夹名，如20191207

this.setData({

date: app.globalData.util.dateFormat(new Date(), “YMD”)

});

//清除缓存

//wx.removeStorageSync(‘fileList’);

//获取缓存中的地址

this.updateData();

},

afterRead(event) {

var that = this;

// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

/* 单个上传 */

/*

const { file } = event.detail;

var filePath = file.path;

var filename = new Date().getTime() + ‘.’+ filePath.substr(filePath.lastIndexOf(‘.’) + 1);

//文件相对路径名

var relativePath = ‘upload/’ + that.data.date + ‘/’ + filename;

//上传图片到对象存储中

//添加到预览中

var img = {

id: i,

url: app.globalData.cosUrl + relativePath,

name: filename

}

//读取缓存

let list = wx.getStorageSync(‘fileList’);

if (list) {

list.push(img);

} else {

list = [img];

}

//存入缓存

wx.setStorageSync(‘fileList’, list);

//延迟更新数据

setTimeout(function () {

that.updateData();

}, 5000);

*/

/* 批量上传 */

var files = event.detail.file; //数组

for (var i = 0; i < files.length; i++) {

var filePath = files[i].path;

var name = new Date().getTime() + ‘.’ + filePath.substr(filePath.lastIndexOf(‘.’) + 1);

//文件名（文件名里添加路径，加以区分）

var fileName = ‘upload/’ + that.data.date + ‘/’ + name;

wx.showLoading({

title: ‘上传中…’,

})

//上传图片到对象存储中

initQiniu();

qiniuUploader.upload(filePath, fileName, (res) => {

var key = res.key;

var imageURL = res.imageURL;

//添加到预览中

var img = {

id: i,

url: imageURL,

key: key

}

//读取缓存

let list = wx.getStorageSync(‘fileList’);

if (list) {

list.push(img);

} else {

list = [img];

}

//存入缓存

wx.setStorageSync(‘fileList’, list);

//更新数据

that.updateData();

wx.hideLoading();

wx.showToast({

title: ‘上传成功’,

icon: ‘success’,

duration: 3000

});

}, (error) => {

wx.hideLoading();

wx.showModal({

title: ‘Error’,

content: ‘请求失败,状态码：’ + JSON.stringify(error),

showCancel: false

});

});

}

},

delFile(event) {

var that = this;

wx.showModal({

title: ‘提示’,

content: ‘确定要删除这张图片吗?’,

success(res) {

if (res.confirm) {

var index = event.detail.index;

//读取缓存

let list = wx.getStorageSync(‘fileList’);

var filename = list[index].key;

//更新fileList中的数据

for (let i = 0; i < list.length; i++) {

//如果item是选中的话，就删除它。

if (filename == list[i].key) {

// 删除对应的索引

list.splice(i, 1);

break;

}

}

//更新缓存

wx.setStorageSync(‘fileList’, list);

//更新数据

that.updateData();

//删除对象存储中的图片

that.delQiniuFile(filename);

} else if (res.cancel) {

//console.log(‘用户点击取消’)

}

}

【延伸Android必备知识点】

【Android部分高级架构视频学习资源】

**Android精讲视频学习后更加是如虎添翼！**进军BATJ大厂等（备战）！现在都说互联网寒冬，其实无非就是你上错了车，且穿的少（技能），要是你上对车，自身技术能力够强，公司换掉的代价大，怎么可能会被裁掉，都是淘汰末端的业务Curd而已！现如今市场上初级程序员泛滥，这套教程针对Android开发工程师1-6年的人员、正处于瓶颈期，想要年后突破自己涨薪的，进阶Android中高级、架构师对你更是如鱼得水！

**任何市场都是优胜略汰适者生存，只要你技术过硬，到哪里都不存在饱和不饱和的问题，所以重要的还是提升自己。懂得多是自己的加分项 而不是必须项。门槛高了只能证明这个市场在不断成熟化！**另外一千个读者就有一千个哈姆雷特，所以以上只是自己的关键，不喜勿喷！

如果你是卡在缺少学习资源的瓶颈上，那么刚刚好我能帮到你。欢迎关注会持续更新和分享的。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
filename);

} else if (res.cancel) {

//console.log(‘用户点击取消’)

}

}

【延伸Android必备知识点】

[外链图片转存中…(img-nfVVSC52-1715136188063)]

【Android部分高级架构视频学习资源】

**Android精讲视频学习后更加是如虎添翼！**进军BATJ大厂等（备战）！现在都说互联网寒冬，其实无非就是你上错了车，且穿的少（技能），要是你上对车，自身技术能力够强，公司换掉的代价大，怎么可能会被裁掉，都是淘汰末端的业务Curd而已！现如今市场上初级程序员泛滥，这套教程针对Android开发工程师1-6年的人员、正处于瓶颈期，想要年后突破自己涨薪的，进阶Android中高级、架构师对你更是如鱼得水！

**任何市场都是优胜略汰适者生存，只要你技术过硬，到哪里都不存在饱和不饱和的问题，所以重要的还是提升自己。懂得多是自己的加分项 而不是必须项。门槛高了只能证明这个市场在不断成熟化！**另外一千个读者就有一千个哈姆雷特，所以以上只是自己的关键，不喜勿喷！

如果你是卡在缺少学习资源的瓶颈上，那么刚刚好我能帮到你。欢迎关注会持续更新和分享的。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！