useUploadOSS.ts:19 POST http://water-drop-assets2.oss-cn-hangzhou.aliyuncs.com/ net::ERR_FAILED 200 (OK)
uploadHandler @ useUploadOSS.ts:19
(anonymous) @ image-uploader.js:124
(anonymous) @ tslib.es6.js:121
__awaiter @ tslib.es6.js:117
(anonymous) @ image-uploader.js:122
(anonymous) @ image-uploader.js:122
(anonymous) @ tslib.es6.js:121
__awaiter @ tslib.es6.js:117
onChange @ image-uploader.js:89
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
Show 23 more frames
react_devtools_backend.js:3973 TypeError: Failed to fetch
at Object.uploadHandler [as upload] (useUploadOSS.ts:19:23)
at image-uploader.js:124:38
at Generator.next ()
at tslib.es6.js:121:71
at new Promise ()
at __awaiter (tslib.es6.js:117:12)
at image-uploader.js:122:62
at Array.map ()
at image-uploader.js:122:34
at Generator.next ()

import { useQuery } from ‘@apollo/client’;
import { GET_OSS_INFO } from ‘…/graphql/oss’;

export const useUploadOSS = () => {
// 1 获取到签名信息
// 2 fetch post 请求把参数传到服务端
const { data: d } = useQuery(GET_OSS_INFO);

const uploadHandler = async (file: File) => {
const formData = new FormData();
const data = d.getOSSInfo;
const key = images/${file.name};
formData.append(‘key’, key);
formData.append(‘policy’, data.policy);
formData.append(‘OSSAccessKeyId’, data.accessId);
formData.append(‘success_action_status’, ‘200’);
formData.append(‘signature’, data.signature);
formData.append(‘file’, file);
const res = await fetch(data.host, {
method: ‘POST’,
body: formData,
});
return { url: res.url + key };
};

return uploadHandler;
};