用react hook形式上传文件

Question

我试图上传一个PDF文件使用React Hook表单与next.js在前端和node.js在后端。

前端:

const FileUpload = () => {
const [proof, setProof] = useState({})
const onSubmit = async (values) => {
try {
const proof = values.proof[0]
let { data } = await axios.post('/api/upload-file', {
proof,
})
setProof(data)
} catch (err) {
console.log(err.response)
}
}
<form onSubmit={handleSubmit(onSubmit)} className={styles['form']}>
<label htmlFor="proof" className={styles['form-input-label']}>
<input
type="file"
name="proof"
{...register('proof')}
placeholder=" "
required
className={`${
errors.proof? styles['form-input-error'] : styles['form-input']
}
)`}
/>
<span className={styles['form-input-placeholder']}>
upload file
</span>
</label>
<p className={styles['form-error']}>{errors.file?.message}</p>
<button
type="submit"
className="btn"
disabled={!isDirty || !isValid || loading}
>
{loading ? <LoadingOutlined spin /> : 'Upload File'}
</button>
</form>
</>
)
}
export default FileUpload

后台(/api/upload-file):

export const uploadFile = async (req, res) => {
try {
console.log(req.body) // => returns empty object (proof:({}))
const { proof } = req.body
if (!proof) return res.status(400).send('File missing')
// prepare the file
const base64Data = new Buffer.from(
proof.replace(/^data:proof/w+;base64,/, ''),
'base64'
)
const type = proof.split(';')[0].split('/')[1]
// image bucket params
const params = {
Bucket: 's3-bucket',
Key: `${nanoid()}.${type}`,
Body: base64Data,
ACL: 'public-read',
ContentType: 'application/pdf',
}
// upload to s3
s3.upload(params, (err, data) => {
if (err) {
console.log(err)
res.sendStatus(400)
}
res.send(data)
})
} catch (err) {
console.log(err)
return res
.status(400)
.send(
'An Error occured'
)
}
}

我无法将文件传递到后端，我得到的只是一个空对象。我试着研究axios文档，以及react hook form文档，但都无济于事。

我哪里做错了?

谢谢你的帮助!

Answer 1

您必须将内容类型设置为multi-part/formdata并创建一个formdata对象来将文件内容发送到后端。您还必须在后端解析该文件multi-part/formdata。查找Multer作为后端，查找formData对象作为前端。