Question

我必须上传具有反应的图像到服务器，但是将请求发送为空图像对象。

这是设置图像状态的功能

...
fileUpload(event) {
    const companyState = {...this.state.company};
    companyState['image'] = event.target.files[0];
    this.setState({company: companyState});
}
...

这是上传图片的代码

...
<input type="file" name="image" className="form-control"  accept="image/*" onChange={this.fileUpload}/>
...

此服务用于发送图像，我已经在此处进行了测试，但是我得到了带有文件的图像对象，但是当我在之前控制台requestOptions时提取请求，使图像对象为空

...
function editCompany(id, companyData){
    const requestOptions = {
        method: 'PUT',
        headers: authHeader(),
        body: JSON.stringify(companyData)
    };
    return fetch(baseUrl+'company/'+id, requestOptions)
            .then(handleResponse)
            .then(company => {
                return company;
            })
}
...

这是我的 auth标头功能。

...
export function authHeader() {
    // return authorization header with jwt token
    let AdminUser = JSON.parse(localStorage.getItem('admin-user'));

    if (AdminUser && AdminUser.token) {
        return { 'Authorization': 'Bearer ' + AdminUser.token , 'Content-Type': 'application/json' };
    } else {
        return {};
    }
}

Answer 1

对于上传文件，您不应使用JSON stringify（如果不将文件转换为base64），请按照以下示例构建请求。

let data = new FormData();
data.append('name', params.name);
data.append('age', params.age);
data.append('files[]', params.files); // where params.files is of type FileList

一旦建立数据，就可以像通常那样发出请求。如果需要，您可能必须在authHeader方法中添加条件以更改标题。例如，将hasFiles的参数添加到方法authHeader(hasFiles=false)并根据需要更改标题。

为什么图像不上传到服务器并做出反应？

1 个答案: