客户端
- 使用
wx.chooseImage
、wx.chooseVideo
、wx.chooseMedia
或wx.chooseMessageFile
选择文件,获取到tempFiles
,然后请求服务端获取上传密钥
submitForm() {
const that = this;
wx.request({
url: 'https://{your_domain}/file/upload',
success(res) {
that.uploadFile(res.data.uploadToken);
}
})
}
- 使用
wx.uploadFile
上传,通过回调实现上传进度及状态提示
uploadFile(token) {
// 文件直传
const uploadTask = wx.uploadFile({
url: 'https://up-z2.qiniup.com', // 视空间地域而定
filePath: this.data.fileList[0].url,
name: 'file',
formData: {
token, // 上传密钥
},
success(res) {
const data = res.data;
console.log(data); // 返回文件哈希(hash)和云端文件名(key)
},
fail(err) {
// 上传失败处理
}
})
// 上传进度回调
uploadTask.onProgressUpdate((res) => {
if(res.progress < 100){
// 进度不足100时显示进度
wx.showLoading({
title: `上传中 ${res.progress}%`,
});
} else if (res.progress == 100){
// 进度达到100时显示结果
wx.showToast({
title: '完成',
icon: 'success'
});
}
})
}
服务端
调用七牛云SDK获取上传密钥
// 以下依赖需先 npm install 安装好
const qiniu = require('qiniu');
const uuid = require("uuid");
// 去七牛控制台获取访问密钥
const accessKey = 'AK';
const secretKey = 'SK';
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
// 获取上传密钥的方法
getUploadToken() {
// 用户上传的文件名五花八门,格式不统一不易管理,存进去还可能乱码,可使用uuid随机生成一个文件名,使服务端文件名格式统一
const id = uuid.v4() // 可自定义文件名
const options = {
scope: 'Bucket', // 空间名称
// 以下均为选填
forceSaveKey: true, // 强制更名,不使用原来的文件名,如需沿用原文件名,可以去掉此项
saveKey: `${id}$(ext)`, // 自定义文件名,其中$(ext)为拓展名
fsizeLimit: 10485760, // 限制文件大小,单位为Byte,以1024计,此处为10M
mimeLimit: 'image/*' // 限制文件格式,此处为只能上传图片
};
const putPolicy = new qiniu.rs.PutPolicy(options); // 配置前面的存储策略
const uploadToken = putPolicy.uploadToken(mac); // 生成上传密钥
// 返回给客户端的数据,其中关键参数是uploadToken
return {
errcode: 0,
errmsg: 'ok',
uploadToken
};
}