如何在H5中利用ChooseImg方法上传图片到七牛

分类：uni-app

众所周知：在H5中选择图片的时候，本地显示的图片地址是blob:http://XXXXXXXXXXXX，而不是像在小程序中的http://mx/XXXXXXXXXXXXXX，也就意味着我们并不能通过file的文件上传到服务器。

这个问题困扰了我很久,终于想到了方法。。。

首先我们不通过后台服务器去上传图片，而是直接以js（ajax）的方法上传图片。

首先我们建立一个需要上传选择图片的组件
<view class="uni-uploaderinput-box" v-show="hasUploadList.length < limit">
<view class="uni-uploaderinput" @tap="chooseImage"></view>
</view>

然后处理 chooseImage的点击事件：

chooseImage: async function() {
var that = this;
if (that.hasUploadList.length === that.limit) {
return;
}
uni.chooseImage({
success(beforRes) {
for (var i = 0; i < beforRes.tempFiles.length; i++) {
var uploadFileName = beforRes.tempFiles[i].path;
// #ifdef H5
that.$connect.uploadFileToQiniuLocal(beforRes.tempFiles[i]).then((uploadRes) => {
//imageListTmp = that.imageList.concat(res.tempFilePaths) //非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
that.hasUploadList.push(uploadRes.urlPreview)
});
// #endif
// #ifndef H5
that.$connect.uploadFileToQiniu(res.tempFilePaths[i]).then((uploadRes) => {
console.log(uploadRes)
});
// #endif

这里有一个很关键的因素：就是去获得qiniu上传的token。然而在这里有一个问题暂时没有办法解决，就是每次上传图片的blob都不一样（即使图片是同一个）；
以下是上传图片的js方法
//非H5 使用
uploadFileToQiniu: async function(file, cb) {
const url = 'qiniu/uploadSingleFile';
const userid = 1;
const header = this.getFormHeader(userid, url, '');
return await new Promise((resolve, reject) => {
uni.uploadFile({
url: baseUrl + url,
// files: file,
filePath: file,
name: 'file',
header: header,
success: function(res) {
resolve(res.data)
}
})
})
},
//H5使用
uploadFileToQiniuLocal: async function(file, cb) {
let qiniuInit = await this.get('qiniu/GetUploadTokenForQiniu', {
md5: hexMD5(file.path),
filesize: file.size,
filetype: 'jpg'
});
let options = {
region: 'ECN', // 华北区
uptokenURL: qiniuInit.results.bucket,
uptoken: qiniuInit.results.uploadToken,
domain: qiniuInit.results.domain,
shouldUseQiniuFileName: true,
fileHead: 'file',
key: this.currentTime()
};
await qiniuUploader.init(options);
return await new Promise((resolve, reject) => {
qiniuUploader.upload(file.path, async (res) => {
resolve(res)
}, (error) => {
console.error('error: ' + JSON.stringify(error));
},
null,
(progress) => {
// console.log('上传进度', progress.progress)
// console.log('已经上传的数据长度', progress.totalBytesSent)
// console.log('预期需要上传的数据总长度', progress.totalBytesExpectedToSend)
});
})
}