javascript - React.js：使用 material-ui-dropzone 从文件中附加值时，formData 没有值

Question

我正在尝试使用名为的库来实现上传功能material-ui-dropzone

我认为上传文件工作正常，但是，当我使用 axios 发送 POST 请求时，formData即使在发送请求之前，我总是会得到一个空的

向内.js

import React, { useState, useEffect, forwardRef } from "react";
import useStyles from "./styles";
import { Paper, Button, Grid } from "@material-ui/core";
import { DropzoneDialog } from "material-ui-dropzone";
import MaterialTable from "material-table";
import {
  AddBox,
  ArrowDownward,
  Check,
  ChevronLeft,
  ChevronRight,
  Clear,
  DeleteOutline,
  Edit,
  FilterList,
  FirstPage,
  LastPage,
  Remove,
  SaveAlt,
  Search,
  ViewColumn,
  Publish,
} from "@material-ui/icons";
import InwardService from "../../services/InwardService";

export default function Inward() {
  const tableIcons = {
    Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => (
      <ChevronRight {...props} ref={ref} />
    )),
    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => (
      <ChevronLeft {...props} ref={ref} />
    )),
    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
    SortArrow: forwardRef((props, ref) => (
      <ArrowDownward {...props} ref={ref} />
    )),
    ThirdStateCheck: forwardRef((props, ref) => (
      <Remove {...props} ref={ref} />
    )),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
  };

  var classes = useStyles();

  const [isDropzoneOpen, setIsDropzoneOpen] = useState(false);
  const [files, setFiles] = useState([]);

  var formData = new FormData();

  useEffect(() => {
    if (files.length > 0) {
      const newFilesMap = files.map(fileMap => {
        formData.append("file", fileMap);
      });
      InwardService.uploadPesonetFile(newFilesMap);
    }
  }, [files]);

  return (
    <>
      <Paper classes={{ root: classes.paperRoot }}>
        <MaterialTable icons={tableIcons} title="" />
        <Grid item xs={3}>
          <br />
          <Button
            variant="contained"
            color="default"
            className={classes.button}
            startIcon={<Publish />}
            onClick={() => setIsDropzoneOpen(true)}
          >
            Upload File
          </Button>
        </Grid>

        <DropzoneDialog
          acceptedFiles={[".inc"]}
          cancelButtonText={"cancel"}
          submitButtonText={"submit"}
          maxFileSize={5000000}
          open={isDropzoneOpen}
          onClose={() => setIsDropzoneOpen(false)}
          onSave={(files) => {
            setFiles(files);
            setIsDropzoneOpen(false);
          }}
          showPreviews={true}
          showFileNamesInPreview={true}
        />
      </Paper>
    </>
  );
}

向内服务.js

import { Component } from "react";
import axios from "axios";
import { API_BASE_URL_UPLOAD } from "../constants/APIUtils";

class InwardService extends Component {

  uploadPesonetFile(files) {
    return axios.post(`${API_BASE_URL_UPLOAD}`, files, {headers: { 'Content-Type': 'multipart/form-data' }})
  }
}

export default new InwardService();

好像这条线没有生效：

formData.append("file", fileMap);

formData知道为什么即使在将文件/文件映射附加到其中之后我也没有任何价值？

标签： javascriptreactjsmaterial-ui

Answer 1

你应该传递formData给uploadPesonetFilein InwardService，你正在传递newFilesMap

所以代码应该是：

files.map(fileMap => {
   formData.append("file", fileMap);
});
InwardService.uploadPesonetFile(formData);

代替 ：

const newFilesMap = files.map(fileMap => {
   formData.append("file", fileMap);
});
InwardService.uploadPesonetFile(newFilesMap);