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!");
            });
        }

但是，我可以在＆＃39; imagedata＆＃39;，＆＃39;数据＆＃39;中看到文件详细信息。即将空无一人。我无法弄清楚为什么＆＃39;数据＆＃39;是空的。这就是为什么后端呼叫失败的原因。

以下是提交后发送到服务器的请求有效负载：

{item_file：{}，delivery_id：＆＃34; eeb9422e-9805-48eb-a8be-ad2e27f3f643＆＃34;，description：＆＃34; test description＆＃34;}

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的文件上传无效。来自reactjs的文件上传POST调用无效

1 个答案: