0

嗨，当我尝试上传图像时遇到问题，FormData() 在其中返回空值，即使我已经附加了它

上传处理程序代码

  const uploadFileHandler = async (e) => {
const file = e.target.files[0];
const formData = new FormData();
// formData.append("username", "Chris");
formData.append("image", file);

console.log(file);
console.log(formData);
setUploading(true);

try {
  const config = {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  };

  const { data } = await axios.post(
    "/api/v1/uploads/primary",
    formData,
    config
  );
  setImage(data);
  setUploading(false);
} catch (error) {
  console.error(error);
  setUploading(false);
}};

文件变量显示其数据

文件变量显示了它的数据，但 formData 仍然为空，这是表单的代码，用户界面我使用 React CoreUi Admin，这是代码

                <CFormGroup>
              <CLabel
                htmlFor="images"
                style={{ fontWeight: "bold", fontSize: 15 }}
              >
                Featured Image
              </CLabel>
              <CInput
                style={{ height: "calc(2em + 0.75rem + 2px)" }}
                accept="*"
                type="file"
                id="images"
                placeholder="Choose Featured Images"
                value={image}
                onChange={uploadFileHandler}
              />
              {uploading && (
                <div className="spinner-border text-primary" role="status">
                  <span className="sr-only">Loading...</span>
                </div>
              )}
            </CFormGroup>

我尝试了很多方法，但它仍然相同，我阅读了 formData.append()文档仍然无法正常工作。我知道错在哪里

4

2 回答 2

1

将此部分替换为以下内容：

const file = e.target.files[0];
const formData = new FormData();
// formData.append("username", "Chris");
formData.append("image", file);


 const formData = new FormData();
 const reader = new FileReader();

 if (e.target.files[0]) {
      reader.readAsDataURL(e.target.files[0]);
    }
 reader.onload = (readerEvent) => {
 formData.append("image", readerEvent.target.result);
};

您调用 FileReader 来读取您的文件。它将它读取为数据 url，然后只要它准备好，它就会将它读取的任何内容附加到您的 formData

于 2021-11-07T11:27:11.320 回答
0

您的 FormData 不为空。

如果您想知道您的 FormData 的内容，那么您可以调用formData.get(key)

const payload = new FormData()
payload.append('foo', 'bar')

// this will not show your value
console.log(payload) 

// this will show your value
console.log(payload.get('foo'))

于 2021-11-08T09:34:23.440 回答