从 reactjs 上传文件不起作用。 POST 从 reactjs 调用文件上传不工作

Question

以下是我的文件上传代码。

<form encType="multipart/form-data" action="">
    <input type="file" name="fileName" defaultValue="fileName"></input>
    <input type="button" value="upload" onClick={this.handleClick.bind(this)}></input>
</form>


handleClick(){
            let deliveryId = this.props.params.deliveryId;
            var data = new FormData();
            var imagedata = document.querySelector('input[type="file"]').files[0];
            data.append("data", imagedata);
            console.log('Data', data);

            fetch(apiBaseUrl, {
                mode: 'no-cors',
                method: "POST",
                body: JSON.stringify({
                    'item_file': data,
                    'delivery_id': deliveryId,
                    'description': 'test description'
                })
            }).then(function (res) {
                if (res.ok) {
                    alert("Perfect! ");
                } else if (res.status == 401) {
                    alert("Oops! ");
                }
            }, function (e) {
                alert("Error submitting form!");
            });
        }

虽然，我可以在 'imagedata' 中看到文件详细信息，但 'data' 正在变空。我无法弄清楚为什么 'data' 是空的。这就是后端调用失败的原因。

提交后发送到服务器的请求负载如下：

{item_file：{}，delivery_id："eeb9422e-9805-48eb-a8be-ad2e27f3f643"，描述："test description"}

Answer 1

您可以使用 FormData 本身来实现文件上传，并带有额外的参数，例如 deliveryId。而且您不能将文件字符串化。

 handleClick() {
    let deliveryId = this.props.params.deliveryId;
    var imagedata = document.querySelector('input[type="file"]').files[0];

    var data = new FormData();
    data.append("item_file", imagedata);
    data.append('delivery_id', deliveryId);
    data.append('description', 'test description');

    fetch(apiBaseUrl, {
        mode: 'no-cors',
        method: "POST",
        body: data
    }).then(function (res) {
        if (res.ok) {
            alert("Perfect! ");
        } else if (res.status == 401) {
            alert("Oops! ");
        }
    }, function (e) {
        alert("Error submitting form!");
    });
}

从 reactjs 上传文件不起作用。 POST 从 reactjs 调用文件上传不工作

file upload from reactjs not working. POST call for file upload from reactjs not working

html

file-upload

multipartform-data

reactjs