小程序 大文件 多图 直接上传七牛云
思想:通过从后端获取的七牛云SDK,完成大文件在小程序直接上传七牛云
本文章实现多图直接上传功能,且能实现预览功能,效果图如下(有需要的朋友们可以看一下):
使用七牛云官方的SDK
composer安装七牛云sdk
composer require itbdw/laravel-storage-qiniu
从后端获取upToken的方法
public function uploadToken()
{
$auth = new Auth('AK', 'SK');
$bucket = 'bucket';
$token = $auth->uploadToken($bucket);
return json_encode(['uptoken'=>$token]);
}
小程序拿到token,用来上传图片
const qiniuUploader = require('../../qiniuUploader.js')
data: {
imageURL:'',
uptoken:''
},
//大文件上传
big(){
wx.request({
url: 'http://www.xxxxx.com/index.php/api/uploadToken',//拿到token
header: {
'Content-Type': 'application/json;charset=UTF-8'
},
method: 'get',
success: (response) => {
this.setData({
uptoken: response.data.uptoken
})
console.log(response)
console.log(this.data.uptoken)
}
})
wx.chooseImage({
//可上传多图
count: 3,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success:(res) => {
//微信小程序的API,获取临时图片地址
console.log(res)
// tempFilePath可以作为img标签的src属性显示图片
const img = res.tempFilePaths
let arr=[]
img.map(url=>{
// 交给七牛上传
qiniuUploader.upload(url, (res) => {
//数组追加
arr.push('http://'+res.imageURL)
this.setData({
'imageURL': arr,
});
console.log(this.data.imageURL)
}, (error) => {
console.log('error: ' + error);
}, {
region: 'NCN', //华北
domain: 'xxx.xxxxx.xxx', // 自己的域名
key: Math.floor(Math.random()*50 + 50)+'.jpg', // 上传到七牛云图片就是这名字了
// 以下方法三选一即可,优先级为:uptoken > uptokenURL > uptokenFunc
uptoken: this.data.uptoken, // 由其他程序生成七牛 uptoken
uptokenURL: 'http://www.xxxxx.com/index.php/api/uploadToken',
// uptokenFunc: function() {
// return '[yourTokenString]';
// }
}, (res) => {
console.log('上传进度', res.progress)
console.log('已经上传的数据长度', res.totalBytesSent)
console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
}, () => {
// 取消上传
}, () => {
// `before` 上传前执行的操作
}, (err) => {
// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
});
})
}
})
},