- 发布:2023-12-18 09:22
- 更新:2023-12-19 11:10
- 阅读:197
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
手机系统: 全部
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: CLI
CLI版本号: 2.0.2-3090820231124001
测试过的手机:
示例代码:
//开启转圈
uni.showLoading({
title: "上传中...",
mask: true,
});
//获取token及上传文件方法
// 获取文件管理签名token
UCloudUFile.prototype.getUFileToken = function (options, success, error) {
var method = options.method || "GET";
var file = options.file || {};
var fileName = options.fileName;
var md5Required = options.md5Required;
var keyName;
var contentType = options.contentType || file.type || "";
var putPolicy = options.putPolicy || "";
keyName = fileName;
var that = this;
var token = "";
// 服务端签名计算
function getSignatureToken(
tokenServerUrl,
method,
bucket,
key,
content_md5,
content_type,
date,
put_policy
) {
var url =
tokenServerUrl +
"?method=" +
method +
"&bucket=" +
bucket +
"&key=" +
key +
"&content_md5=" +
content_md5 +
"&content_type=" +
content_type +
"&date=" +
date +
"&put_policy=" +
Base64.encode(put_policy);
var reqData = appendExtraParam(tokenServerUrl, {});
uni.request({
url: url,
method: "POST",
header: requestFormHeader(),
data: reqData,
success: (resp) => {
success(resp.data.trim());
},
fail: (resp) => {
error("UFile token 获取失败");
},
complete: (resp) => {
//
},
});
}
this.getUFileToken(
requestToken,
function (token) {
var url = that.getBucketUrl() + encodeURIComponent(fileName);
uni.uploadFile({
url: url,
header: {
"Content-MD5": "",
},
filePath: file,
name: "file",
formData: {
FileName: fileName,
Authorization: token,
},
success: (resp) => {
if (resp.statusCode === 200) {
success({
fileName: fileName,
});
}
// success(resp)
console.log("成功上传", resp);
},
fail: (resp) => {
error({
fileName: fileName,
});
console.log("上传失败", resp);
},
});
},
function (error) {}
);
};
//调用token及上传方法后关闭loading
this.ufile.batchUpload(
waitFilesUFile,
async (resp) => {
uni.hideLoading();
console.log("batchUpload resp", resp);
// 这里校验上传之前的图片数量和上传之后图片数量是否一致 TODO
let successFiles = [];
let fileNames = "";
// 假设一致
for (let i = 0; i < resp.length; i++) {
fileNames += resp[i].fileName + ",";
successFiles.push({
fileName: resp[i].fileName,
fullPath: "",
thumbFullPath: "",
shouldReUpload: false,
});
}
//
const responseBody = await fetchMakePrivateUrl({
fileNames: fileNames,
});
if (!responseBody) {
return;
}
console.log("responseBody", responseBody);
for (let i = 0; i < successFiles.length; i++) {
successFiles[i] = responseBody.data[i];
}
console.log("successFiles", successFiles);
this.handleUploadResult(200, successFiles, fromType, fromIndex);
},
(resp) => {
uni.hideLoading();
uni.showModal({
title: "",
content: "图片上传失败:" + JSON.stringify(resp),
});
console.log("上传失败", resp);
},
(progress) => {
console.log("progress", progress);
if (progress === 1) {
uni.hideLoading();
} else {
this.progressCent = "上传中...";
}
}
);
//开启转圈
uni.showLoading({
title: "上传中...",
mask: true,
});
//获取token及上传文件方法
// 获取文件管理签名token
UCloudUFile.prototype.getUFileToken = function (options, success, error) {
var method = options.method || "GET";
var file = options.file || {};
var fileName = options.fileName;
var md5Required = options.md5Required;
var keyName;
var contentType = options.contentType || file.type || "";
var putPolicy = options.putPolicy || "";
keyName = fileName;
var that = this;
var token = "";
// 服务端签名计算
function getSignatureToken(
tokenServerUrl,
method,
bucket,
key,
content_md5,
content_type,
date,
put_policy
) {
var url =
tokenServerUrl +
"?method=" +
method +
"&bucket=" +
bucket +
"&key=" +
key +
"&content_md5=" +
content_md5 +
"&content_type=" +
content_type +
"&date=" +
date +
"&put_policy=" +
Base64.encode(put_policy);
var reqData = appendExtraParam(tokenServerUrl, {});
uni.request({
url: url,
method: "POST",
header: requestFormHeader(),
data: reqData,
success: (resp) => {
success(resp.data.trim());
},
fail: (resp) => {
error("UFile token 获取失败");
},
complete: (resp) => {
//
},
});
}
this.getUFileToken(
requestToken,
function (token) {
var url = that.getBucketUrl() + encodeURIComponent(fileName);
uni.uploadFile({
url: url,
header: {
"Content-MD5": "",
},
filePath: file,
name: "file",
formData: {
FileName: fileName,
Authorization: token,
},
success: (resp) => {
if (resp.statusCode === 200) {
success({
fileName: fileName,
});
}
// success(resp)
console.log("成功上传", resp);
},
fail: (resp) => {
error({
fileName: fileName,
});
console.log("上传失败", resp);
},
});
},
function (error) {}
);
};
//调用token及上传方法后关闭loading
this.ufile.batchUpload(
waitFilesUFile,
async (resp) => {
uni.hideLoading();
console.log("batchUpload resp", resp);
// 这里校验上传之前的图片数量和上传之后图片数量是否一致 TODO
let successFiles = [];
let fileNames = "";
// 假设一致
for (let i = 0; i < resp.length; i++) {
fileNames += resp[i].fileName + ",";
successFiles.push({
fileName: resp[i].fileName,
fullPath: "",
thumbFullPath: "",
shouldReUpload: false,
});
}
//
const responseBody = await fetchMakePrivateUrl({
fileNames: fileNames,
});
if (!responseBody) {
return;
}
console.log("responseBody", responseBody);
for (let i = 0; i < successFiles.length; i++) {
successFiles[i] = responseBody.data[i];
}
console.log("successFiles", successFiles);
this.handleUploadResult(200, successFiles, fromType, fromIndex);
},
(resp) => {
uni.hideLoading();
uni.showModal({
title: "",
content: "图片上传失败:" + JSON.stringify(resp),
});
console.log("上传失败", resp);
},
(progress) => {
console.log("progress", progress);
if (progress === 1) {
uni.hideLoading();
} else {
this.progressCent = "上传中...";
}
}
);
操作步骤:
执行showLoading后,执行获取token上传文件途中,慢速网络切别的网络
执行showLoading后,执行获取token上传文件途中,慢速网络切别的网络
预期结果:
执行上传成功或失败的逻辑,关闭loading
执行上传成功或失败的逻辑,关闭loading
实际结果:
一直转圈
一直转圈
bug描述:
上传文件之前我们开启loading转圈,然后调用token并上传文件,对于上传成功和失败都做了相应的逻辑并关闭loading。如果上传途中慢速网络切别的网络会导致一直转圈无法执行成功和失败的相应逻辑。在最外层我们包裹了try catch,也无法捕获到异常。
7***@qq.com (作者)
用哪个方法可以监听到上传进度
2023-12-19 14:02
y***@jiayuxiangmei.com
回复 7***@qq.com: onProgressUpdate
2023-12-19 14:36
DCloud_uniCloud_VK
回复 y***@jiayuxiangmei.com: 文档上有 文档
2023-12-19 14:38
7***@qq.com (作者)
回复 DCloud_uniCloud_VK: ```javascript
this.ufile.batchUpload(
waitFilesUFile,
async (resp) => {
uni.hideLoading();
2023-12-20 14:11