版权声明:原创博文转载请注明出处 https://blog.csdn.net/sinat_38695417/article/details/85001965
小程序多图片上传
文件上传 微信小程序官方文档
这里为了方便使用,对 小程序文件上传的函数进行了 再次的封装;同时为了方便记忆,是和使用,按照微信给出的文档进行编写;
先看一下怎么使用吧!
// 选择照片
wx.chooseImage({
success: function(res) {
console.log(res, app.util.url('applet_img_upload'));
// 这里把地址 和 上传照片,都放在了一个 util.js 中
// 在 app.js 中 util: requier('utils/util.js')
app.util.uploadFile({
url: app.util.url('applet_img_upload'),
filePath: res.tempFilePaths, // 也可以传单张 res.tempFilePaths[0],这样好像 多此一举了
name: 'image', // 具有默认值,可写可不写
success: e => {
console.log(e);
},
fail: err => {
console.log(err);
}
})
},
})
这里把该函数放到了 util.js 中;放到其他地方也是可以的;
/*
* @param {Object}
* upImageFile({url: 'test.com', filePath: ['1.png', '2.png'], name: 'image', success: res => {}, fail: err => {} })
*/
// i 记录当前上传的图片 fileUrl 图片上传后的地址 err 记录上传失败,或错误次数
uploadFile: function (obj, i = 0, fileUrl = [], err = 0) {
// 有时也可能会直接上传单张图片
if (typeof obj.filePath === 'string') obj.filePath = [obj.filePath];
wx.uploadFile({
url: obj.url, // 接收图片的地址
filePath: obj.filePath[i], // 图片的临时路径,由微信返回
name: obj.name || "image", // 对应的 key,这里设置默认 image
success: res => {
var resData = res.data;
// 异常处理,有时后台返回的数据可能会有点问题,这个看需求写
try {
resData = JSON.parse(resData);
}
catch (err) {
resData = JSON.parse(resData.substring(1));
}
if (resData.ec === 200) { // 判断上传是否成功,根据后台返回的状态判定,这里需要根据你自己后台返回的状态去判断
i++;
fileUrl.push(resData.data.path); // 后台返回图片路径
// 如果都上传完毕 直接 执行 success
if (i === obj.filePath.length) {
if (obj.success) obj.success({ msg: 'uploadFile:ok', data: fileUrl, statusCode: res.statusCode });
}
// 如果没有完成 则继续调用该函数
else {
this.uploadFile(obj, i, fileUrl);
}
}
else {
// 如果没有失败,记录上传失败次数,我这里定义上传 失败 3次结束执行上传,返回失败结果,执行 fail;后续如果有需求,这块你也可以改成动态的
err++;
if (err <= 3) this.uploadFile(obj, i, fileUrl, err);
else {
console.log('%c 返回信息:', 'color: #f00', resData)
console.log('%c 请注意: 请求成功时,后台返回的信息可能与此函数中的配置不一致,注意修改', 'color: blue');
}
}
},
fail: err => {
// 上传失败执行,同上
err++;
if (err <= 3) this.uploadFile(obj, i, fileUrl, err);
else {
var errObj = { err, i, fileUrl };
if (obj.fail) obj.fail(errObj);
console.log('%c 图片上传失败,请注意检查...', 'color: #f00', errObj);
}
}
})
}
T.T