1,普通上传(单图包括多图)
upload() {
let url = 'https://***************';
let name = 'file'
let _this = this
let i = 0
$.chooseImage(3 - this.data.imgUrlArr.length).then((filePath) => {
console.log(filePath)
this.setData({
image: filePath
})
this.batchUploadImg(url, filePath, i, name)
})
},
batchUploadImg(url, filePath, i, name) {
let _this = this
wx.showLoading({
title: '正在上传...',
mask: true,
success: () => {
wx.uploadFile({
url: url,
filePath: filePath[i],
name: name,
success: function (res) {
if (res.statusCode == 200) {
let data = JSON.parse(res.data)
console.log(data)
if (data.status == 1) {
let image = _this.data.imgUrlArr;
image.push(data.data.url)
return (
_this.setData({
imgUrlArr: image,
}),
console.log(_this.data.imgUrlArr)
)
} else {
console.log(res.msg)
}
}
},
fail: function (res) {},
complete: function (res) {
wx.hideLoading()
console.log(res)
i++
if (i < filePath.length) {
_this.batchUploadImg(url, filePath, i, name)
}
},
})
}
})
},
delImg(e) {
let _this = this;
let index = parseInt(e.currentTarget.dataset.index);
let imgUrlArr = this.data.imgUrlArr;
wx.showModal({
title: '删除',
content: '确定删除这张照片',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
imgUrlArr.splice(index, 1)
_this.setData({
imgUrlArr: imgUrlArr,
maintain_pic: imgUrlArr.join()
})
console.log(_this.data.maintain_pic)
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
2,上传oss
在网上找了一圈试了可以单图上传,但是上传第二张会把第一张删掉,自己改版了一下
(一般有6个js文件base64,config(是放oss的key,链接的),crypto,hmac,sha1,最重要的是uploadImg)
uploadImg文件
const env = require('config.js'); //配置文件,在这文件里配置你的OSS keyId和KeySecret,timeout:87600;
const base64 = require('base64.js'); //Base64,hmac,sha1,crypto相关算法
require('hmac.js');
require('sha1.js');
const Crypto = require('crypto.js');
/*
*上传文件到阿里云oss
*@param - filePath :图片的本地资源路径
*@param - dir:表示要传到哪个目录下
*@param - successc:成功回调
*@param - failc:失败回调
*/
const batchUploadImg = (filePath, i, name, successc, failc) => {
// let fileTypeIndex = filePath.lastIndexOf('.');
// let fileType = filePath.substring(fileTypeIndex);
//图片名字 可以自行定义, 这里是采用当前的时间戳 + 150内的随机数来给图片命名的
const aliyunFileKey = new Date().getTime() + Math.floor(Math.random() * 150) + '.png';
// const aliyunFileKey = new Date().getTime() + Math.floor(Math.random() * 150) + fileType;
const aliyunServerURL = env.uploadImageUrl; //OSS地址,需要https
const accessid = env.OSSAccessKeyId;
const policyBase64 = getPolicyBase64();
const signature = getSignature(policyBase64); //获取签名
wx.showLoading({
title: '正在上传...',
mask: true,
success: () => {
wx.uploadFile({
url: aliyunServerURL, //开发者服务器 url
filePath: filePath[i], //要上传文件资源的路径
name: 'file', //必须填file
formData: {
'key': aliyunFileKey,
'policy': policyBase64,
'OSSAccessKeyId': accessid,
'signature': signature,
'success_action_status': '200',
},
success: function (res) {
if (res.statusCode != 200) {
failc(new Error('上传错误:' + JSON.stringify(res)))
return;
}
successc(aliyunServerURL + aliyunFileKey);
},
fail: function (err) {
err.wxaddinfo = aliyunServerURL;
failc(err);
},
complete: function (res) {
wx.hideLoading()
//最重要的是这个
i++
if (i < filePath.length) {
batchUploadImg(filePath, i, name, successc, failc)
}
},
})
}
})
}
const getPolicyBase64 = function () {
let date = new Date();
date.setHours(date.getHours() + env.timeout);
let srcT = date.toISOString();
const policyText = {
"expiration": srcT, //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
"conditions": [
["content-length-range", 0, 5 * 1024 * 1024] // 设置上传文件的大小限制,5mb
]
};
const policyBase64 = base64.encode(JSON.stringify(policyText));
return policyBase64;
}
const getSignature = function (policyBase64) {
const accesskey = env.AccessKeySecret;
const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
asBytes: true
});
const signature = Crypto.util.bytesToBase64(bytes);
return signature;
}
module.exports = batchUploadImg;
-------------------------------
$是自己封装的方法
## 使用
const batchUploadImg = require('../../uploadImg/uploadImg.js');
点击上传的方法
uploadImg() {
let _this = this
let name = 'file'
let i = 0
$.chooseImage(5 - this.data.imgUrlArr.length).then((filePath) => {
console.log(filePath)
batchUploadImg(filePath, i, name,
function (result) {
let image = _this.data.imgUrlArr;
image.push(result)
return (
_this.setData({
imgUrlArr: image,
})
)
}
)
})
},