所需的请求部分“文件”不存在 - Angular2 Post 请求答案

【问题标题】：Required request part 'file' is not present - Angular2 Post request所需的请求部分“文件”不存在 - Angular2 Post 请求
【发布时间】：2017-10-23 16:52:26
【问题描述】：

我正在尝试使用 Angular2 和 SpringBoot 完成我的文件上传功能。我可以证明我的文件上传的 java 代码工作正常，因为我已经使用 Postman 成功测试了它。

但是，在从 Angular2 前端发送文件时，我收到的 HTTP 400 响应为 Required request part 'file' is not present。

这就是我从 Angular2 发送 POST 请求的方式。

savePhoto(photoToSave: File) {

    let formData: FormData = new FormData();
    formData.append('file', photoToSave);

    // this will be used to add headers to the requests conditionally later using Custom Request Options
    this._globals.setRequestFrom("save-photo");


    let savedPath = this._http
        .post(this._endpointUrl + "save-photo", formData)
        .map(
        res => {
            return res.json();
        }
        )
        .catch(handleError);

    return savedPath;

}

请注意，我编写了一个扩展BaseRequestOptions 的CustomRequestOptions 类，以便附加授权标头和内容类型标头。内容类型标头将有条件地添加。

下面是代码。

@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
    constructor(private _globals: Globals) {
        super();

        this.headers.set('X-Requested-By', 'Angular 2');
        this.headers.append('virglk', "vigamage");
    }

    merge(options?: RequestOptionsArgs): RequestOptions {

        var newOptions = super.merge(options);

        let hdr = this._globals.getAuthorization();
        newOptions.headers.set("Authorization", hdr);

        if(this._globals.getRequestFrom() != "save-photo"){
            newOptions.headers.set('Content-Type', 'application/json');
        }else{
            //request coming from save photo
            console.log("request coming from save photo");
        }

        return newOptions;
    }

}

此条件标题附加工作正常。这样做的目的是如果我在每个请求中添加'Content-Type', 'application/json' 标头，Spring 控制器中的文件上传方法将不接受它。（返回 http 415）

一切似乎都很好。但我得到Required request part 'file' is not present 错误响应。这是为什么？我正在将该参数添加到表单数据中。

let formData: FormData = new FormData();
formData.append('file', photoToSave);

这是Spring Controller方法供大家参考。

@RequestMapping(method = RequestMethod.POST, value = "/tender/save-new/save-photo", consumes = {"multipart/form-data"})
public ResponseEntity<?> uploadPhoto(@RequestParam("file") MultipartFile file){

    if (file.isEmpty()) {
        ErrorResponse errorResponse = new ErrorResponse();
        errorResponse.setMessage("DEBUG: Attached file is empty");
        return new ResponseEntity<ErrorResponse>(errorResponse, HttpStatus.NOT_FOUND);
    }
    String returnPath = null;
    try {
        // upload stuff
    } catch (IOException e) {
        ErrorResponse errorResponse = new ErrorResponse();
        errorResponse.setMessage(e.getMessage());
        return new ResponseEntity<ErrorResponse> (errorResponse, HttpStatus.INTERNAL_SERVER_ERROR);
    }

    return new ResponseEntity<String>(returnPath, HttpStatus.OK);
}

EDIT - 添加浏览器捕获的请求的负载

如您所见，参数“文件”在那里可用。

【问题讨论】：

有完全相同的问题。如果你解决了问题，请告诉我
嗨，刚刚想通了。问题在于从 DOM 获取输入对象。服务器代码没有问题。当您控制台记录输入文件时，它会打印吗？让我知道
谢谢兄弟！你的提示奏效了！我将文件数组而不是单个数组传递给服务器！谢谢！！
很高兴听到这个消息 :)
您能发布有效的解决方案吗？我在挣扎

标签： spring angular http file-upload spring-boot

【解决方案1】：

尝试添加

headers: {
            'Content-Type': 'multipart/form-data'
        },

给你的

.post(this._endpointUrl + "save-photo", formData)

【讨论】：

试过这个。没有运气:(

【解决方案2】：

更改formData.append('file', photoToSave); 到
formData.append('file', this.photoToSave, this.photoToSave.name);
并添加标头，指定您传递给 API 的数据类型，在您的情况下，它将是
'Content-Type': 'multipart/form-data'。如果更改后仍然失败，请在此处发布输出。

【讨论】：

【解决方案3】：

您是否有可能在转发请求的辅助应用中使用 zuul？我通过更新看到了这一点，其中在转发多部分上传时标题被剥离。我有一个看门人应用程序，它使用 zuul 通过从尤里卡查看将请求转发到实际服务。我通过像这样修改网址来修复它：

http://myserver.com/service/upload

到

http://myserver.com/zuul/service/upload

突然间，上传标头的“文件”部分不再被剥离和丢弃。

原因，我怀疑是缓存请求的重试机制。失败时，它会重新提交请求，但不知何故，对于文件上传，它无法正常工作。

【讨论】：

【解决方案4】：

要将文件上传到服务器，请将文件发送到FormData 中，并将内容类型设置为multipart/form-data。


export const uploadFile = (url, file, onUploadProgress) => {
    let formData = new FormData();

    formData.append("file", file);

    return axios.post(url, formData, {
        headers: {
            'Content-Type': 'multipart/form-data;charset=UTF-8',
            // other headers


        },
        onUploadProgress,
    })
};

要处理文件对象，请注意此处的consumes 属性和@RequestPart 注释。

@PostMapping(value = "/your-upload-path", consumes = "multipart/form-data")
public ResponseEntity<Object> uploadFile(@RequestPart("file") @Valid @NotNull @NotBlank MultipartFile file) {
    // .. your service call or logic here
}

【讨论】：