Question

我正在制作一个包含几个文本输入和一个文件上传输入的表单。我不确定如何设置反映一系列已上传照片的状态。然后如何使用所述状态的值发出POST请求。从理论上讲，我希望能够上传一些照片，捕获这些照片的值并将其设置为文件状态，然后将信息数组发布到端点。

function NewItem(props) {


const history = useHistory();
  const { classes } = props;
  const { isDarkMode } = useContext(ThemeContext);
  const { token } = useContext(LoggedInContext);

  const [itemNameValue, handleItemNameChange, resetItemName] = InputState("");
  const [itemPriceValue, handlePriceChange, resetPriceUrl] = InputState("");
  const [
    itemDescriptionValue,
    handleItemDescriptionChange,
    resetItemDescription
  ] = InputState("");

  const [fileState, setFileState] = useState([]);

  const handleFileUpload = e => {
    setFileState(e.target.files[0]);
  };

  const handleNewItemSubmit = e => {
    e.preventDefault();
    fetch("http://localhost:8181/items", {
      body: JSON.stringify({
        title: itemNameValue,
        price: itemPriceValue,
        description: itemDescriptionValue,
        photos: fileState
      }),
      headers: {
        "Content-Type": "application/json",
        Token: token
      },
      method: "POST"
    })
      .then(res => res.json())
      .then(data => {
        console.log(data);
        handleSnackbarClick();
      });
  };
  return (
    <PageContent>
      <Navbar />
      <h1 className={classes.heading} style={{ color: isDarkMode && "white" }}>
        New Item
      </h1>
      <form
        className={classes.newForm}
        noValidate
        autoComplete="off"
        onSubmit={handleNewItemSubmit}
      >

        <TextField
          id="outlined-desc"
          label="Facebook Item Description"
          variant="outlined"
          multiline={true}
          rows={4}
          rowsMax={8}
          onChange={handleItemDescriptionChange}
          value={itemDescriptionValue}
          InputLabelProps={{
            classes: {
              root: isDarkMode && classes.cssLabel,
              focused: classes.cssFocused
            }
          }}
          InputProps={{
            classes: {
              root: isDarkMode && classes.cssOutlinedInput,
              focused: classes.cssFocused,
              notchedOutline: isDarkMode && classes.notchedOutline,
              input: isDarkMode && classes.multilineColor
            }
          }}
        />
        <div className={classes.photo_groups}>
          <input
            accept="image/*"
            className={classes.input}
            style={{ display: "none" }}
            id="raised-button-file"
            multiple
            type="file"
            onChange={handleFileUpload}
          />
          <label htmlFor="raised-button-file">
            <Button
              variant="raised"
              component="span"
              className={classes.button}
            >
              Photo Upload
            </Button>
          </label>
          <GroupCheckbox />
        </div>
      </form>
    </PageContent>
  );
}

Answer 1

您可以使用FileReader()将图像转换为base64字符串，然后将其发送到“ POST”数据中。

将您的Texbox函数更改为此-

socket.io

handleFileUpload读取图像文件的内容并在完成后触发loadend。

const handleFileUpload = e => { const reader = new FileReader(); const file = e.target.files[0]; reader.onloadend = () => { setFileState(reader.result); }; reader.readAsDataURL(file); };函数会将fileState设置为base64字符串。

使用钩子在React中处理文件上传状态

1 个答案: