客户端
- 使用
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
};
}
返回hash 和key后 怎么生成可访问的web地址啊
2、上传成功后,保存图片地址为:加速域名+你的空间文件路径
3、调用时直接加载该图片地址即可
安全用法:1、把你的七牛空间访问模式设置为私有访问。
2、上传成功后,保存图片地址为“空间文件路径”
3、读取时,用七牛接口,通过鉴权,用“空间文件路径”换取图片网络路径(换取的路径有失效周期),再进行加载。
安全用法虽然安全但是读取速度可能会受一些影响,所以如果是遍历路径,可能会稍稍影响用户体验
uploadFile(file,token,key) {
let that = this
// 文件直传
const uploadTask = wx.uploadFile({
//https://up-z2.qiniup.com
url: `https://up-z2.qiniup.com•`, // 视空间地域而定
filePath: file,
name: 'file',
formData: {
key: key,
token: token, // 上传密钥
},
success(res) {
const data = JSON.parse(res.data);
const imgSrc = that.data.domain + data.key
that.updateUser(data.key)
console.log('上传成功',data); // 返回文件哈希(hash)和云端文件名(key)
},
fail(err) {
console.log('上传失败',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'
});
}
})
},