使用fetch上传图片

先创建一个用于上传文件的input标签，type为file，并添加onChange事件

<Input
  type="file"
  id="doc-file-upload"
  onChange={handleChange}
/>

在change事件，通过event.target.files获取到上传的图片，如果需要显示上传图片的预览，则通过FileReader方法，将图片读取为可以显示的格式。

const handleChange = (e) => {
    const files = e.target.files;
    const file = files[0];
    // file就是将要上传的文件
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (evt) {
        setImgSrc(evt.target.result)
    }
};

<img src={imgSrc} />

取到文件file后，则需要通过post方法上传

const uploadFile = async (url, params = {}) => {
    const headers = getHeaders(url, "FormData");
    const formData = new FormData();
    for (const k in params) {
      formData.append(k, params[k]);
    }
    const res = await fetch(url, {
      method: 'POST',
      mode: "cors",
      headers,
      body: formData
    });
    const data = await res.json();
    return data;
}
// 在handleChange中添加uploadFile即可完成上传
const handleChange = (e) => {
    const files = e.target.files;
    const file = files[0];
    uploadFile("api/uploadPath", {
        name: "01",
        file,
    });
};