首页 > 解决方案 > 为什么文件字段为空?React 文件上传到 .net core web api

问题描述

我正在尝试将图片发送到后端,当我用邮递员测试它时,web api 可以工作。当我从前端发送图像文件时,它是空的。

下面的代码从表单数据发送

  const submit = useCallback(
    async (values: PostExtensions) => {
      debugger;
      setLoading(true);

      const date = dayjs(values.date );
      values.date = dayjs(date , "YYYY-MM-DDTHH:mm:ss Z").format();
      var imgdata = values.file![0];

      const formdata: FormData = new FormData();
      formdata.append("postId", values.postId!);
      formdata.append("file", imgdata);
      formdata.append("userId", values.userId!);
      formdata.append("projectId", values.projectId!);
      formdata.append("date", values.date!);

      for (var pair of Array.from(formdata.entries())) {
        console.log(pair[0] + ', ' + JSON.stringify(pair[1]));
      }

      await entitySubmit({ // entity submit is axios extensions for my crud op and state op.
        values: formdata,
        dispatch: dispatch,
        returndata: true,
        links: [
          {
            type: 0,
            link: "gider/addpost",
            actionType: ActionType.add_Post,
            method: "POST",
          },
          {
            type: 1,
            link: "gider/editpost",
            actionType: ActionType.edit_Post,
            method: "POST",
          },
        ],
        id: "postId",
      })
        .then((res) => {
          if (res) {
            console.log(res);
            setLoading(false);
            setShow({ ...show, modal: false });
          } else {
            setLoading(false);
          }
        })
        .catch(() => setLoading(false));
      return null;
    },
    [show, dispatch]
  );

文件进入values.file,但是发送的时候变成了这个形状。

文件字段总是得到这个 --> 文件,“[object Object]”

我无法将文件对象发布到服务器

在此处输入图像描述

编辑1:当我尝试这段代码时,我找到了解决方案

var imgdata = new Blob([values.file![0]], {type : 'image/jpeg'}),

这似乎是工作,但如果图像不是 jpg 扩展名怎么办?

标签: reactjsaxiosmultipartform-data

解决方案


推荐阅读