代码之家  ›  专栏  ›  技术社区  ›  SkyeBoniwell

使用AXIOS将表单数据发布到.NET API

  •  2
  • SkyeBoniwell  · 技术社区  · 6 年前

    我正在使用React和AXIOS将FormData发布到内部.NET API。

    API需要这样的数据:

        [HttpPost("upload")]
        public virtual async Task<IActionResult> PostMulti(Int64 parentId, ICollection<IFormFile> fileData)
        {
            foreach (var file in fileData) {
                await SaveFile(file, parent);
            }
    
            return Created("", Map(Repository.Get(parentId)));
        }
    

    当我单步执行调试器时,“filedata”的计数始终为0。

    以下是我使用AXIOS发送的方法:

        const formData = new FormData();
        formData.append('image', this.state.file);
    
        console.log("this.state.file = ", this.state.file);
        console.log("formData = ", formData);
    
        axios({
            url: `/api/gameMethods/playerStates/${this.props.playerId}/files/upload`,
            method: 'POST',
            data: formData,
            headers: {
                Accept: 'application/json',
                'Content-Type': 'multipart/form-data'
            }
        })
           .then((response) => {
                //handle success
                console.log('response -- then: ', response);
                this.setState({
                    file: this.state.file
                });
            })
            .catch((response) => {
                //handle error
                console.log('response -- catch: ', response);
            }); 
    

    我使用console.log进行调试。当我写出来时,它会显示文件对象(名称、大小等)。

    它还在方法的“.then”处理程序中激发,并显示以下内容:

    响应--然后:数据:数组(0),状态:201,状态文本:“已创建” “

    所以,我不知道它为什么不向API发送任何东西,我也不知道发生了什么,也不知道如何解决这个问题。

    任何帮助都将不胜感激。

    谢谢!

    2 回复  |  直到 6 年前
        1
  •  1
  •   programtreasures    6 年前

    您应该发布 formData

    const filesToSubmit = []
    filesToSubmit.push((new FormData()).append('image', this.state.file))
    

    当发布数据时,属性名应该是 表单数据

    axios({
        url: `/api/gameMethods/playerStates/${this.props.playerId}/files/upload`,
        method: 'POST',
        data: {formData : filesToSubmit},
        headers: {
            Accept: 'application/json',
            'Content-Type': 'multipart/form-data'
        }
    })
    

    如果构造数组时出现问题,则需要添加 IFormFile 数组的属性

        2
  •  1
  •   lux    6 年前

    所以我也有同样的问题,不管我怎样扭曲 FormData 对象,无论我发送的标题是什么,我都无法让.NET接受提交。

    在node.js方面,实际上很难检查AXIOS发出的HTTP调用——这意味着我看不到我实际发布的内容。

    因此,我将post移到ui进行一些调试,发现 表单数据 有效负载没有像我预期的那样被传递,所以.NET拒绝是正确的。

    我最终使用了下面的配置,这些帖子开始被浏览。同样,在我的情况下,我认为我需要 表单数据 但是下面的内容非常简单:

    axios({
        url: myUrl,
        method: 'POST',
        data: `email=${myEmail}`,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
    .then(response => {
        console.log(response);
        })
    .catch(error => {
        console.error(error);
    });
    

    更新 :不确定编码数据的工作方式,但因为它将作为字符串传递,所以值得一试!

    const myUploadedImage = "data:image/png;name=colors.png;base64,iVBORw0KGgoAAAANSUhEUgAAA5gAAAEECAIAAADCkQz7AAAGGUlEQVR4nO3YIY/IcRzHcWd4AjZJkZQr2I1dIJlyRU5ErkJggg=="