Я не могу загрузить файл с помощью FormData, используя axios из приложения React, на экспресс-сервер, который использует multer.
Текстовые данные, добавленные в formData, отображаются на сервере, но любой файл кажется невидимым на стороне сервера.
Однако изучение ключей formData на стороне клиента показывает файл.
Вот мой серверный код для печати содержимого тела: postFile.ts
import * as path from 'path';
let multer = require("multer");
let storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, path.resolve(__dirname));
},
filename: function (req, file, cb) {
cb(null, file.originalname);
}
});
let upload = multer({ storage: storage });
export const postFile = (app: IApp) => {
app.post('/uploadFile', upload.any(), (request: IRequest, response: IResponse) => {
console.info('Got body:', JSON.stringify(request.body));
response.sendStatus(200);
});
}
Это код на стороне клиента React: FilePicker.tsx
import axios from "axios";
import * as React from "react";
interface IFilePickerProps {
fileToUpload: File;
setFileToUpload: React.Dispatch<File | undefined>;
}
export const FilePicker = (props: IFilePickerProps) => {
const { setFileToUpload, fileToUpload } = props;
// Ref to input element to reset value on file upload completion
const inputRef = React.useRef<HTMLInputElement>();
const { onFileUpload, onFileChange } = useUploadFileCallbacks(
setFileToUpload,
fileToUpload,
inputRef
);
return (
<>
<label>
<input type = "file" onChange = {onFileChange} ref = {inputRef} />
</label>
<button onClick = {onFileUpload}>Upload File</button>
</>
);
};
const useUploadFileCallbacks = (
setFileToUpload: React.Dispatch<File | undefined>,
fileToUpload: File,
inputRef: React.RefObject<HTMLInputElement>
) => {
const onFileChange = React.useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
setFileToUpload(event.target.files[0]);
},
[setFileToUpload]
);
const onFileUpload = React.useCallback(() => {
handleFileUpload(fileToUpload, inputRef);
}, [fileToUpload]);
return { onFileChange, onFileUpload };
};
const handleFileUpload = async (
fileToUpload: File,
inputRef: React.RefObject<HTMLInputElement>
) => {
let formData = new FormData();
formData.append("usernamesss", "Sparsha Saha");
formData.append("file", fileToUpload);
axios
.post("http://localhost:3001/uploadFile", formData, {
headers: {
"content-type": "multipart/form-data",
},
})
.then(() => {
console.info("Complete");
});
inputRef.current.value = "";
};
В console.info в postFile.ts отображается только «usernamesss: Sparsha Saha».
Я искал решения, но, похоже, у меня ничего не работает. Может кто-нибудь, пожалуйста, помогите мне?
Похоже, что console.info не показывает файл, но он определенно загружается в указанную папку. Интересно, к какой части запроса на самом деле добавляются данные файла и можем ли мы как-то это визуализировать.