微信小程序使用七牛云对象存储保存图片和文件
var config = {
qiniuRegion: '',
qiniuImageURLPrefix: '',
qiniuUploadToken: '',
qiniuUploadTokenURL: '',
qiniuUploadTokenFunction: null
}
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', //所属地域（华南）
};
七牛云的存储对象的地区对应表
<table align="left" border="1" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align:center;width:202px;"><strong>存储区域</strong></td><td style="text-ali
gn:center;width:131px;"><strong>区域代码</strong></td><td style="text-align:center;width:368px;"><strong>客户端上传地址</strong></td></tr><tr><td style="text-align:center;width:202px;">华东</td><td style="text-align:center;width:131px;">ECN</td><td style="text-align:center;width:368px;"><p>https://up.qbox.me</p></td></tr><tr><td style="text-align:center;width:202px;">华北</td><td style="text-align:center;width:131px;">NCN</td><td style="text-align:center;width:368px;"><p>https://up-z1.qbox.me</p></td></tr><tr><td style="text-align:center;width:202px;">华南</td><td style="text-align:center;width:131px;">SCN</td><td style="text-align:center;width:368px;"><p>https://up-z2.qbox.me</p></td></tr><tr><td style="text-align:center;width:202px;">北美</td><td style="text-align:center;width:131px;">NA</td><td style="text-align:center;width:368px;"><p>https://up-na0.qbox.me</p></td></tr></tbody></table>
?五、index.wxml 代码：??
<view class="container">
<van-uploader file-list="{{ fileList }}" upload-text="添加图片" bind:after-read="afterRead" bind:delete="delFile" multiple="{{true}}"/>
</view>
六、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('用户点击取消')
}
}
})
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论