https://blog.csdn.net/shoujing1001/article/details/87870773
前端上传的图片很占用服务器资源，因此寻找解决办法看到了七牛云的图片上传功能，由于七牛云只提供了单张图片上传的api，我使用循环的方式实现了前端上传多图的效果。实现过程中踩到了两个坑值得记录一下，第一是循环中的异步回调函数导致的key和token错位，其次就是回调函数的作用域问题。
前端使用的是dcloud的uniapp框架，大致结构与微信小程序没有差别，基本上小程序的api在uniapp中也有对应的api。
前端使用
首先下载七牛云提供的前端sdk，解压到本地将 qiniuUploader.js 引入到需要上传图片的页面使用。
这里我放到了components/qiniuUploader目录下。
<template>
<view>
<button type=”primary” @click=”qupload”>选择图片</button>
<button type=”primary” @click=”test”>七牛多图</button>
</view>
</template>
<script>
const qiniuUploader = require(“../../components/qiniuUploader”);
export default {
data() {
return {
token: [],
key: [],
filePath: []
}
},
methods: {
qupload() {
// 选择图片
uni.chooseImage({
count: 4,
success: (res) => {
this.filePath = this.filePath.concat(res.tempFilePaths);
for (var i = 0; i < 4; i++) {
// this.key[i] = md5(Math.random().toString(36).substr(2));一开始是在这里生成后端生成token所需的key，由于没有考虑到回调函数的异步导致了key和token不匹配造成的上传失败，最后通过将key放到后端生成，前端请求后端接口时一起获取解决了这个问题
uni.request({
url: ‘http://api.nauzone.cn/?service=’,//后端生成key和token的接口
success: (re) => {
console.log(re.data.data);
// this.token.push(re.data.data);
//将token和key放入数组中备用，这里还有一个问题就是回调函数的this指向问题，经过经验事实发现，如果回调函数的格式写成匿名函数 success:function(){ }的样式将会导致this指向变为函数内部，这是将报this没有token和key的属性，虽然这已经在全局声明了。写成success: (re) => { } 则没有任何问题，此时回调函数内部就是全局。还有一个坑也是回调函数的异步导致的在同一个执行期上下文内，在回调函数的内部push的值在外部不能立即获取，这里需要注意一下。
this.token.push(re.data.data.token);
this.key.push(re.data.data.key);
}
});
}
}
});
},
test() {//循环上传图片
for (var i = 0; i < 4; i++) {
//console.log(this.filePath[i]);
console.log(this.key[i]);
console.log(this.token[i]);
qiniuUploader.upload(this.filePath[i], (res) => {
console.log(res.imageURL);
}, (error) => {
var a = JSON.stringify(error);
console.log(‘error: ‘ + a);
}, {
region: ‘ECN’,
domain: ‘pn7r16wx7.bkt.clouddn.com’, // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
key: this.key[i], // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
uptoken: this.token[i],
});
}
}
}
</script>
后端token生成
七牛云上传要求由key生成一个上传凭证token，token有3中方法生成并给七牛云验证。第一就是由其他程序生成token后在调用时将token一起上传，第二是在前端构造一个token生成函数，第三是将后端生成token的api地址发给七牛。无论通过那种方式，都要求key和token要一一对应起来，否则将报403错误。
我采用的是第一种方法，由后端生成key和token发送给前端，前端接收后在调用时将收到的token和key发给七牛云即可。后端采用phalapi开源php框架，引入了七牛云服务器端的sdk后，重写了一下便能引入实现了。
use App\Common\Qiniu;
/**
* 七牛图片文件上传
* @desc 只能上传单个图片文
* @return array token 返回七牛云上传凭证token
* @return string key 返回生成token的key
*/
public function qiniu() {
$rs = array();
$rs[‘key’] = md5(uniqid(microtime(true),true));//生成唯一字符串
$uploader = new Qiniu(‘七牛云ak’,’七牛云sk’);
$rs[‘token’] = $uploader->uploadToken(‘upload’,$rs[‘key’]);
return $rs;
}