Javascript 在React with hooks中处理文件上载状态

我正在制作一个包含两个文本输入和一个文件上传输入的表单。我不确定如何设置反映上传照片的状态。然后如何使用所述状态的值来发出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>
  );
}

函数新项（道具）{
const history=useHistory（）；
常量{classes}=props；
const{isDarkMode}=useContext（ThemeContext）；
const{token}=useContext（LoggedInContext）；
常量[itemNameValue，handleItemNameChange，resetItemName]=InputState（“”）；
const[itemPriceValue，handlePriceChange，resetPriceUrl]=InputState（“”）；
常数[
itemDescriptionValue，
handleItemDescriptionChange，
resetItemDescription
]=输入状态（“”）；
const[fileState，setFileState]=useState（[]）；
const handleFileUpload=e=>{
setFileState（e.target.files[0]）；
};
const handleNewItemSubmit=e=>{
e、 预防默认值（）；
取回（“http://localhost:8181/items", {
正文：JSON.stringify({
标题：itemNameValue，
价格：itemPriceValue，
描述：itemDescriptionValue，
照片：文件状态
}),
标题：{
“内容类型”：“应用程序/json”，
令牌：令牌
},
方法：“员额”
})
.then（res=>res.json（））
。然后（数据=>{
控制台日志（数据）；
无手柄nackbarclick（）；
});
};
返回(
新项目
照片上传
);
}

您可以使用将图像转换为base64字符串，并在“POST”数据中发送它们

将您的

handleFileUpload

功能更改为此-

const handleFileUpload = e => {
    const reader = new FileReader();
    const file = e.target.files[0];
    reader.onloadend = () => {
      setFileState(reader.result);
    };
    reader.readAsDataURL(file);
  };

reader.readAsDataURL

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

reader.onloadend

函数将文件状态设置为base64字符串