Загрузить файл PDF на сервер Express - PullRequest
Новая
       17

Загрузить файл PDF на сервер Express

0 голосов
/ 15 декабря 2018

Я создал базовую форму браузера, позволяющую пользователям загружать PDF-файл.Затем я хочу отправить этот файл в бэкэнд Express.Кажется, что это должно быть довольно простое действие, но я не знаком с сквозным процессом, поэтому я не уверен, какая часть терпит неудачу.Я просмотрел несколько SO вопросов / ответов, но не нашел ни одного, дающего полное решение, и я также не смог собрать решение вместе.

Обновление: Похоже, файл попадает на сервер, но кодировка испорчена.Я предполагаю, что FileReader.readAsText - неправильный метод для использования.FileReader.readAsBinaryString подтолкнул меня немного ближе, но все же не совсем правильно (и это устарело).FileReader.readAsArrayBuffer кажется потенциально возможным, но я не уверен, как правильно обрабатывать буфер в Express.

Клиент / браузер

Формавстроен в React и просто использует обработчик onChange для самого ввода.Когда файл добавлен, обработчик считывает файл, добавляет его в данные формы и отправляет запрос на публикацию на сервер. 

// React form
<input
  name="upload"
  onChange={this._handleUpload}
  type="file"
/>

_handleUpload = (e) => {
  const { files, name } = e.target;

  // Read the file
  const reader = new FileReader();
  reader.onload = (e) => {
    const file = e.target.result;

    // Now that we have the file's contents, append to the form data.
    const formData = new FormData();
    formData.append('file', file);
    formData.append('type', name);

    axios
      .post('/upload', formData)
      .then(res => {
        // Handle the response...
      })
      .catch(err => console.log(err));
  };

  // Reading as text. Should this be something else?
  reader.readAsText(files[0]);
}

Express App

Экспресс-приложение использует multer middleware для обработки загрузки: 

const app = express();
const upload = multer({});

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());
app.post('/upload', upload.any(), handleUpload);

Middleware

Наконец, у меня есть свое промежуточное ПО, которое получаетфайл из мультитера.Я тестирую этот фрагмент, просто записывая полученный файл на диск.В нем есть содержимое, но это не читаемый файл PDF. 

const handleUpload = (req, res, next) => {
  // The file shows up on req.body instead of req.file, per multer docs.
  const { file } = req.body;

  // File is written, but it's not a readable PDF.
  const tmp = fs.writeFileSync(
    path.join(__dirname, './test.pdf'),
    file,
  );
}

Есть ли какая-то часть, которую я здесь явно ошибаюсь?Например: нужно ли обрабатывать PDF-файлы особым образом?Какие-нибудь советы, где сосредоточиться на моей отладке?

1 Ответ

0 голосов
/ 15 декабря 2018

Проверьте, решает ли это вашу проблему. 

_handleUpload = (e) => {
    const dataForm = new FormData();
    dataForm.append('file', e.target.files[0]);  
      axios
        .post('http://localhost:4000/test', dataForm)
        .then(res => {

        })
        .catch(err => console.log(err));      
}

render() {
  return (
    <div className="App">
      <input
      onChange={this._handleUpload}
      type="file"
      />    
    </div>
  )
}

сервер: 

router.post('/test', upload.any(), (req, res) => {
    console.log(req.files)
    res.send({sucess: true})
})

Нет необходимости отправлять тип файла,Multer идентифицирует имя и тип для вас.

...