javascript - Javascript 上传 excel 文件 (XLS/XLSX)

Question

我正在尝试将 Excel 电子表格上传到我的 React 应用程序中。我不需要阅读或编辑任何内容，只需将其上传到云存储位置。我已经尝试使用标准<input type="file" />和react-dropzone来获取文件（它确实如此），但是，一旦我尝试使用axios发送的文件将文件传输到后端，就会返回为undefined. 这是我的代码：

上传器前端

import React, { useState, useContext } from 'react';
import FileContext from '../../context/file/fileContext';

const Uploader = () => {
  const fileContext = useContext(FileContext);
  const { uploadFile } = fileContext;

  const [file, setFile] = useState('');

  const onChange = (e) => {
    setFile(e.target.files[0]);
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', e.target.files[0]);
    uploadFile(formData);
  };

  return (
    <div className="container">
        <div className="row">
          <form className="col s12" onSubmit={onSubmit}>
            <div className="row">
              <div className="col s12">
                <h4>Upload PO file</h4>
              </div>
              <div className="input-field col s12">
                <label className="active" htmlFor="xlsFile">
                  Choose an XLS/XLSX file to upload...
                </label>
                <input
                  type="file"
                  name="xlsFile"
                  id="xlsFile"
                  accept=".xls, .xlsx"
                  onChange={onChange}
                />
              </div>
              <div className="col s12">
                <button className="btn btn-primary">Upload</button>
              </div>
            </div>
          </form>
        </div>
    </div>
  );
};

export default Uploader;

uploadFile()功能

const uploadFile = async (formData) => {
    const uploaded = await axios.post('/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
  };

用于文件上传的路由器 POST

router.post('/upload', async (req, res) => {
  const { file } = req.files;
  console.log(file);
});

标签： javascriptreactjsfileupload