问题描述
我正在尝试使用前端的React和使用Django和Graphene构建的后端将音频文件上传到AWS S3。我在控制台中不断收到以下错误
index.js:1 Error uploading file Error: Request Failed with status code 400
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:61)
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:2273
handleAudioUpload @ CreateTrack.jsx:45
async function (async)
handleAudioUpload @ CreateTrack.jsx:32
handleSubmit @ CreateTrack.jsx:53
onSubmit @ CreateTrack.jsx:75
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executedispatch @ react-dom.development.js:389
executedispatchesInorder @ react-dom.development.js:414
executedispatchesAndRelease @ react-dom.development.js:3278
executedispatchesAndReleasetopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedpluginEventsInBatch @ react-dom.development.js:3514
handletopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptTodispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchdiscreteEvent @ react-dom.development.js:4168
httpLink.ts:134 POST http://localhost:8000/graphql/ 400 (Bad Request)
(anonymous) @ httpLink.ts:134
Subscription @ Observable.js:197
subscribe @ Observable.js:279
(anonymous) @ observables.ts:10
Subscription @ Observable.js:197
subscribe @ Observable.js:279
(anonymous) @ QueryManager.ts:217
(anonymous) @ QueryManager.ts:210
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
QueryManager.mutate @ QueryManager.ts:142
ApolloClient.mutate @ ApolloClient.ts:348
MutationData.mutate @ MutationData.ts:99
MutationData._this.runMutation @ MutationData.ts:67
handleSubmit @ CreateTrack.jsx:54
async function (async)
handleSubmit @ CreateTrack.jsx:53
onSubmit @ CreateTrack.jsx:75
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executedispatch @ react-dom.development.js:389
executedispatchesInorder @ react-dom.development.js:414
executedispatchesAndRelease @ react-dom.development.js:3278
executedispatchesAndReleasetopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedpluginEventsInBatch @ react-dom.development.js:3514
handletopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptTodispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchdiscreteEvent @ react-dom.development.js:4168
ApolloError.ts:46 Uncaught (in promise) Error: Network error: Response not successful: Received
status code 400
at new ApolloError (ApolloError.ts:46)
at Object.error (QueryManager.ts:255)
at notifySubscription (Observable.js:140)
at onNotify (Observable.js:179)
at SubscriptionObserver.error (Observable.js:240)
at observables.ts:15
at Set.forEach (<anonymous>)
at Object.error (observables.ts:15)
at notifySubscription (Observable.js:140)
at onNotify (Observable.js:179)
at SubscriptionObserver.error (Observable.js:240)
at httpLink.ts:184
我的React JS表单代码如下
import React,{ useState } from "react";
import axios from "axios";
import { Mutation } from "react-apollo";
import { CREATE_TRACK_MUTATION } from "../../graphql/mutations";
import { GET_TRACKS_QUERY } from "../../graphql/queries";
const CreateTrack = () => {
const [title,setTitle] = useState("");
const [description,setDescription] = useState("");
const [file,setFile] = useState("");
const [submitting,setSubmitting] = useState(false);
const [fileError,setFileError] = useState("");
const handleAudio = (event) => {
const selectedFile = event.target.files[0];
const fileSizeLimit = 500000000; // 500mb
if (selectedFile && selectedFile.size > fileSizeLimit) {
setFileError(`${selectedFile.name}: is larger than 500mb`);
} else {
setFile(selectedFile);
setFileError("");
}
};
const handleAudioUpload = async () => {
try {
const data = new FormData();
const res = await axios.post(
"https://mybucketname.s3.amazonaws.com/",data,{
headers: {
accept: "application/json","Accept-Language": "en-US,en;q=0.8","Content-Type": `multipart/form-data; boundary=${data._boundary}`,},}
);
return res.data.url;
} catch (error) {
console.error("Error uploading file",error);
setSubmitting(false);
}
};
const handleSubmit = async (event,createTrack) => {
event.preventDefault();
setSubmitting(true);
const uploadedUrl = await handleAudioUpload();
createTrack({ variables: { title,description,url: uploadedUrl } });
};
return (
<div className="container">
<h1>CreateTrack</h1>
<Mutation
mutation={CREATE_TRACK_MUTATION}
onCompleted={(data) => {
console.log({ data });
setSubmitting(false);
setTitle("");
setDescription("");
setFile("");
}}
refetchQueries={() => [{ query: GET_TRACKS_QUERY }]}
>
{(createTrack,{ loading,error }) => {
if (error) return <h3>error!</h3>;
return (
<div className="card card-body mb-4 mt-4">
<form onSubmit={(event) => handleSubmit(event,createTrack)}>
<div className="form-group">
<label htmlFor="title">Title</label>
<input
type="text"
className="form-control"
id="title"
onChange={(event) => setTitle(event.target.value)}
value={title}
/>
</div>
<div className="form-group">
<label htmlFor="description">Description</label>
<textarea
className="form-control"
id="description"
rows="3"
onChange={(event) => setDescription(event.target.value)}
value={description}
></textarea>
</div>
<div className="custom-file mb-3">
<input
type="file"
className="custom-file-input"
id="audio"
required
accept="audio/mp3,audio/wav"
onChange={handleAudio}
/>
<label className="custom-file-label" htmlFor="audio">
Choose file...
</label>
</div>
<p className="py-2 text-muted">{file && file.name}</p>
<p className="py-2 text-muted">{fileError}</p>
<button
className="btn btn-primary"
disabled={!title.trim() || !description.trim() || !file}
>
<i className="fab fa-itunes-note mr-3"></i>
{submitting ? "submitting ..." : "Add Track"}
</button>
</form>
</div>
);
}}
</Mutation>
</div>
);
};
export default CreateTrack;
如果有人可以看看并指出我做错了什么，请多谢。谢谢
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）