Canvas \u622a\u56fe\u662f Base64 \u683c\u5f0f，\u6211\u8981\u628a\u5b83\u4e0a\u4f20\u5230\u963f\u91cc\u4e91 OSS\u3002\u4f46 OSS \u7684 FormData \u4e0a\u4f20\u4e0d\u652f\u6301 Base64\u3002<\/p>\n
const uploadBase64ToOss = async (base64Str, directory = "files") => {
\n \/\/ \u89e3\u6790 base64
\n const arr = base64Str.split(",");
\n const mime = arr[0].match(\/:(.*?);\/)[1]; \/\/ e.g. image\/png
\n const bstr = atob(arr[1]);
\n const n = bstr.length;
\n const u8arr = new Uint8Array(n);<\/p>\n
while (n–) {
\n u8arr[n] = bstr.charCodeAt(n);
\n }<\/p>\n
\/\/ \u6784\u9020 Blob
\n const blob = new Blob([u8arr], { type: mime });<\/p>\n
\/\/ … \u540e\u7eed\u4e0a\u4f20\u903b\u8f91
\n};<\/p>\n
atob \u628a Base64 \u5b57\u7b26\u4e32\u8f6c\u6210\u4e8c\u8fdb\u5236\u5b57\u7b26\u4e32，\u7136\u540e\u9010\u4e2a\u5b57\u7b26\u8f6c\u6210 Uint8Array\u3002<\/p>\n
\/\/ \u83b7\u53d6 OSS \u4e34\u65f6\u7b7e\u540d
\nconst signData = await getSign(directory);<\/p>\n
\/\/ \u65f6\u95f4\u6233\u6587\u4ef6\u540d
\nconst timestamp = new Date().getTime();
\nconst fileExt = mime.split("\/")[1] || "bin"; \/\/ e.g. png
\nconst fileName = `${timestamp}.${fileExt}`;<\/p>\n
\/\/ OSS \u8868\u5355\u6570\u636e
\nconst formData = new FormData();
\nformData.append("OSSAccessKeyId", signData.data.accessId);
\nformData.append("policy", signData.data.policy);
\nformData.append("signature", signData.data.signature);
\nformData.append("key", `${directory}\/${fileName}`);
\nformData.append("success_action_status", "200");
\nformData.append("file", blob, fileName);<\/p>\n
const response = await fetch("https:\/\/<bucket-name>.<region>.aliyuncs.com", {
\n method: "POST",
\n body: formData,
\n});<\/p>\n
if (response.status === 200) {
\n return `https:\/\/<bucket-name>.<region>.aliyuncs.com\/${directory}\/${fileName}`;
\n} else {
\n throw new Error("\u4e0a\u4f20\u5931\u8d25");
\n}<\/p>\n
\u4e4b\u524d\u4e0a\u4f20\u6587\u4ef6\u7528\u7684\u662f XMLHttpRequest，\u4f46 Base64 \u8f6c Blob \u540e，\u7528 fetch \u66f4\u7b80\u6d01：<\/p>\n
\/\/ \u274c XMLHttpRequest
\nconst xhr = new XMLHttpRequest();
\nxhr.open('POST', url);
\nxhr.onload = () => resolve(xhr.status === 200 ? url : null);
\nxhr.onerror = reject;
\nxhr.send(formData);<\/p>\n
\/\/ \u2705 fetch
\nconst response = await fetch(url, { method: 'POST', body: formData });
\nreturn response.status === 200 ? url : null;<\/p>\n
Canvas \u622a\u56fe\u662f Base64 \u683c\u5f0f，\u6211\u8981\u628a\u5b83\u4e0a\u4f20\u5230\u963f\u91cc\u4e91 OSS\u3002\u4f46 OSS \u7684 FormData \u4e0a\u4f20\u4e0d\u652f\u6301 Base64\u3002\u7b2c\u4e00\u6b65：Base64 \u8f6c Blobconst uploadBase64ToOss async (base64Str, directory \\”files\\”) > {\/\/ \u89e3\u6790 base64const arr base64Str.split(\\”,\\”);const mime arr[0].match(\/:(.*?);<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[7779,2284,96],"topic":[],"class_list":["post-73843","post","type-post","status-publish","format-standard","hentry","category-server","tag-base64","tag-oss","tag-96"],"yoast_head":"\n