| 小程序 大文件 多图 直接上传七牛云 | 您所在的位置：网站首页 › 微信图片牛头像图片 › 小程序 大文件 多图 直接上传七牛云 |
小程序 大文件 多图 直接上传七牛云
|
思想：通过从后端获取的七牛云SDK，完成大文件在小程序直接上传七牛云 本文章实现多图直接上传功能，且能实现预览功能，效果图如下（有需要的朋友们可以看一下）： 使用七牛云官方的SDK 下载：qiniu-wxapp-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;' }, 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` 上传接受后执行的操作(无论成功还是失败都执行) }); }) } }) }, |
【本文地址】
公司简介
联系我们