@elia-ori/editor 0.1.17 → 0.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -102,11 +102,21 @@ const handleImageUpload = async (file, onProgress) => {
|
|
|
102
102
|
// 1. 取得 presigned URL
|
|
103
103
|
const { upload_url, file_url } = await getPresignedUrl(file.name, file.type);
|
|
104
104
|
|
|
105
|
-
// 2. 上傳到 R2
|
|
106
|
-
await
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
105
|
+
// 2. 上傳到 R2（使用 XMLHttpRequest 以支援進度追蹤）
|
|
106
|
+
await new Promise((resolve, reject) => {
|
|
107
|
+
const xhr = new XMLHttpRequest();
|
|
108
|
+
xhr.open('PUT', upload_url);
|
|
109
|
+
xhr.setRequestHeader('Content-Type', file.type);
|
|
110
|
+
|
|
111
|
+
xhr.upload.onprogress = (e) => {
|
|
112
|
+
if (e.lengthComputable) {
|
|
113
|
+
onProgress?.({ progress: Math.round((e.loaded / e.total) * 100) });
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
xhr.onload = () => (xhr.status >= 200 && xhr.status < 300 ? resolve() : reject(new Error('上傳失敗')));
|
|
118
|
+
xhr.onerror = () => reject(new Error('上傳失敗'));
|
|
119
|
+
xhr.send(file);
|
|
110
120
|
});
|
|
111
121
|
|
|
112
122
|
// 3. 回傳公開 URL
|
|
@@ -114,6 +124,8 @@ const handleImageUpload = async (file, onProgress) => {
|
|
|
114
124
|
};
|
|
115
125
|
```
|
|
116
126
|
|
|
127
|
+
> **注意**：`fetch` API 不支援上傳進度追蹤，需使用 `XMLHttpRequest`。
|
|
128
|
+
|
|
117
129
|
## 嵌入模式
|
|
118
130
|
|
|
119
131
|
預設編輯器會佔滿整個視窗高度。如果要嵌入到現有頁面，使用 `embedded` prop：
|