英文:
Send an Audio File in a multipart/form-data Form POST Using Remix.run (1.16)
问题
我试图通过表单的POST请求将音频文件发送到服务器端。
我试图在Remix文档这里中所指示的方法中，将 unstable_parseMultipartFormData 与 multipart/form-data表单结合使用，但我得到了这个错误：TypeError: uploadHandler2 不是一个函数
在 parseMultipartFormData 处发生
我试图在服务器端内使用这个文件。
export const action = async ({ request, context }) => {
const formData = await unstable_parseMultipartFormData(
request,
uploadHandler
);
return '''
};
export default function Index() {
const submit = useSubmit()
const [formData, setFormData] = useState({
audioFile: '''',
});
const handleFileChange = (event) => {
setFormData({ audioFile: event.target.files[0] });
};
const handleSubmit = async (e) => {
e.preventDefault();
submit(formData, { method: "post" });
};
return (
<>
<section>
<Form encType="multipart/form-data" method="POST" >
<input
id="fileUpload"
name="audioFile"
type="file"
accept=".mp3,.m4a"
// onChange={handleFileChange}
className="bg-neutral-600 text-white px-4 py-2 rounded-lg mb-4 w-full text-sm"
/>
<button className="text-white border border-white p-2 rounded-md text-sm" type="submit">Send</button>
</Form>
</section>
</>
);
}
帮助将不胜感激。
谢谢。
英文:
I'm trying to send an audio file to the server side through a post request of a form.
I'm trying to use unstable_parseMultipartFormData in conbination with multipart/form-data Form as instructed on Remix documentation here but I get this error: TypeError: uploadHandler2 is not a function
at parseMultipartFormData
Im trying to use this file on server side inside the action.
export const action = async ({ request, context }) => {
const formData = await unstable_parseMultipartFormData(
request,
uploadHandler
);
return ''
};
export default function Index() {
const submit = useSubmit()
const [formData, setFormData] = useState({
audioFile: '',
});
const handleFileChange = (event) => {
setFormData({ audioFile: event.target.files[0] });
};
const handleSubmit = async (e) => {
e.preventDefault();
submit(formData, { method: "post" });
};
return (
<>
<section>
<Form encType="multipart/form-data" method="POST" >
<input
id="fileUpload"
name="audioFile"
type="file"
accept=".mp3,.m4a"
// onChange={handleFileChange}
className="bg-neutral-600 text-white px-4 py-2 rounded-lg mb-4 w-full text-sm"
/>
<button className="text-white border border-white p-2 rounded-md text-sm" type="submit">Send</button>
</Form>
</section>
</>
);
}
Help is be greatly appreciated.
Thank you.
答案1
得分: 1
要上传文件，您需要设置<Form encType>：
<Form method="post" encType="multipart/form-data">
<input type="file" name="audioFile" />
<button>提交</button>
</Form>
然后创建一个带有uploadHandler的动作：
import {
unstable_createMemoryUploadHandler,
unstable_parseMultipartFormData,
} from '@remix-run/node';
export const action = async ({ request }: ActionArgs) => {
const uploadHandler = unstable_createMemoryUploadHandler({
maxPartSize: 500_000,
});
const formData = await unstable_parseMultipartFormData(
request,
uploadHandler
);
// 现在您可以将音频文件作为File对象获取
const audioFile = formData.get("audioFile") as File;
// ...
}
详细信息请参阅：https://remix.run/docs/en/1.16.1/utils/parse-multipart-form-data
英文:
To upload files, you need to set the <Form encType>:
<Form method="post" encType="multipart/form-data">
<input type="file" name="audioFile" />
<button>Submit</button>
</Form>
Then create an action with an uploadHandler:
import {
unstable_createMemoryUploadHandler,
unstable_parseMultipartFormData,
} from '@remix-run/node';
export const action = async ({ request }: ActionArgs) => {
const uploadHandler = unstable_createMemoryUploadHandler({
maxPartSize: 500_000,
});
const formData = await unstable_parseMultipartFormData(
request,
uploadHandler
);
// now you can get the audio file as a File object
const audioFile = formData.get("audioFile") as File;
...
}
https://remix.run/docs/en/1.16.1/utils/parse-multipart-form-data
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论