Oak-Team
/
oak-frontend-base
13
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases 37 Wiki Activity

上传支持进度条 传参getPercent

This commit is contained in:
wangwenchen 2025-08-28 10:53:14 +08:00
parent 0b27c8d563
commit 1c0e72cbe1
3 changed files with 153 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
es/utils/upload.web.d.ts vendored
View File

@ -1,3 +1,3 @@
export declare class Upload {
uploadFile(file: File | string, name: string, uploadUrl: string, formData: Record<string, any>, autoInform?: boolean): Promise<any>;
uploadFile(file: File | string, name: string, uploadUrl: string, formData: Record<string, any>, autoInform?: boolean, getPercent?: Function): Promise<any>;
}

82
es/utils/upload.web.js
View File

@ -1,15 +1,75 @@
export class Upload {
async uploadFile(file, name, uploadUrl, formData, autoInform) {
const formData2 = new FormData();
for (const key of Object.keys(formData)) {
formData2.append(key, formData[key]);
// async uploadFile(
// file: File | string,
// name: string,
// uploadUrl: string,
// formData: Record<string, any>,
// autoInform?: boolean
// ): Promise<any> {
// const formData2 = new FormData();
// for (const key of Object.keys(formData)) {
// formData2.append(key, formData[key]);
// }
// formData2.append(name || 'file', file as File);
// const options = {
// body: formData2,
// method: 'POST',
// };
// const result = await fetch(uploadUrl, options);
// return result;
// }
async uploadFile(file, name, uploadUrl, formData, autoInform, getPercent) {
if (getPercent) {
const formData2 = new FormData();
Object.entries(formData).forEach(([key, value]) => {
formData2.append(key, value);
});
formData2.append(name || 'file', file);
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
let percent = 0;
xhr.upload.addEventListener('progress', (event) => {
if (event.lengthComputable) {
percent = Math.round((event.loaded / event.total) * 100);
getPercent(percent);
}
});
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
if (xhr.status === 204) {
resolve({ status: 204 }); // 正确返回状态码
}
else {
try {
const data = JSON.parse(xhr.responseText);
resolve(data);
}
catch (e) {
resolve({ status: xhr.status, raw: xhr.responseText });
}
}
}
else {
reject(new Error(`HTTP Error: ${xhr.status}`));
}
};
xhr.onerror = () => reject(new Error('Network Error'));
xhr.open('POST', uploadUrl);
xhr.send(formData2);
});
}
else {
const formData2 = new FormData();
for (const key of Object.keys(formData)) {
formData2.append(key, formData[key]);
}
formData2.append(name || 'file', file);
const options = {
body: formData2,
method: 'POST',
};
const result = await fetch(uploadUrl, options);
return result;
}
formData2.append(name || 'file', file);
const options = {
body: formData2,
method: 'POST',
};
const result = await fetch(uploadUrl, options);
return result;
}
}

94
src/utils/upload.web.ts
View File

@ -1,25 +1,93 @@
export class Upload {
// async uploadFile(
// file: File | string,
// name: string,
// uploadUrl: string,
// formData: Record<string, any>,
// autoInform?: boolean
// ): Promise<any> {
// const formData2 = new FormData();
// for (const key of Object.keys(formData)) {
// formData2.append(key, formData[key]);
// }
// formData2.append(name || 'file', file as File);
// const options = {
// body: formData2,
// method: 'POST',
// };
// const result = await fetch(uploadUrl, options);
// return result;
// }
async uploadFile(
file: File | string,
name: string,
uploadUrl: string,
formData: Record<string, any>,
autoInform?: boolean
autoInform?: boolean,
getPercent?: Function,
): Promise<any> {
const formData2 = new FormData();
for (const key of Object.keys(formData)) {
formData2.append(key, formData[key]);
if (getPercent) {
const formData2 = new FormData();
Object.entries(formData).forEach(([key, value]) => {
formData2.append(key, value);
});
formData2.append(name || 'file', file);
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
let percent = 0;
xhr.upload.addEventListener('progress', (event) => {
if (event.lengthComputable) {
percent = Math.round((event.loaded / event.total) * 100);
getPercent(percent);
}
});
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
if (xhr.status === 204) {
resolve({ status: 204 }); // 正确返回状态码
} else {
try {
const data = JSON.parse(xhr.responseText);
resolve(data);
} catch (e) {
resolve({ status: xhr.status, raw: xhr.responseText });
}
}
} else {
reject(new Error(`HTTP Error: ${xhr.status}`));
}
};
xhr.onerror = () => reject(new Error('Network Error'));
xhr.open('POST', uploadUrl);
xhr.send(formData2);
});
} else {
const formData2 = new FormData();
for (const key of Object.keys(formData)) {
formData2.append(key, formData[key]);
}
formData2.append(name || 'file', file as File);
const options = {
body: formData2,
method: 'POST',
};
const result = await fetch(uploadUrl, options);
return result;
}
formData2.append(name || 'file', file as File);
const options = {
body: formData2,
method: 'POST',
};
const result = await fetch(uploadUrl, options);
return result;
}
}