Question

我是angular 2和nodejs的新手，到目前为止，我只需要使用POST请求将json对象发送到后端，但现在我需要发送一个图像文件，我遇到了问题。我希望用户输入一个图像文件，然后将其作为POST请求的主体发送到后端，然后在后端将图像上传到s3。在前端我有以下html

<div>
     <input type="file" (change)="testOnChange($event)" multiple/>
</div>

触发关联组件中的以下代码

testOnChange(event){
        var files = event.srcElement.files;
        this.jobService.s3Upload(files[0]).subscribe(data => {
            console.log(data);
        });
    }

使用s3Upload中的jobService函数

s3Upload(file){
        const body = file;

        const headers = new Headers({'Content-Type': 'image/jpg'});
        return this.http.post('http://localhost:3000/job/s3upload', body, {headers: headers})
            .map((response:Response) => {
               console.log(response);
               return response;
            })
            .catch((error:Response) => {
                this.errorService.handleError(error.json());
                return Observable.throw(error.json());
            });
    }

然后在后端

router.post('/s3upload', function(req,res){
    console.log(req.body);

    const file = req.body;

    aws.config.update({
        "accessKeyId": process.env.AWS_ACCESS_KEY_ID,
        "secretAccessKey": process.env.AWS_SECRET_ACCESS_KEY,
        "region": "us-west-2"
    });
    const s3 = new aws.S3();

    var params = {
        Bucket: 'labeller-images',
        Key: file.name,
        ContentType: file.type,
        Body: file,
        ACL: 'public-read'
    };
    console.log(params);

    s3.putObject(params, function (err, data) {
        if (err) {
            console.log("upload error");
            return res.status(500).json({
                title: 'An error occurred',
                error: err
            });
        } else {
            console.log("Successfully uploaded data");
            res.status(200).json({
                message: 'Success',
                obj: `https://labeller-images.s3.amazonaws.com/${file.name}`
            })
        }
    });

});

出现的具体错误是There were 2 validation errors: * MissingRequiredParameter: Missing required key 'Key' in params * InvalidParameterType: Expected params.Body to be a string, Buffer, Stream, Blob, or typed array object.但是日志记录声明显示req.body只是{}，因此params是

{ Bucket: 'labeller-images',
  Key: undefined,
  ContentType: undefined,
  Body: {},
  ACL: 'public-read' }

所以看起来req.body是空的，图像文件实际上永远不会到达后端。谁能看到我在这里做错了什么？是某种文件序列化问题吗？

Angular 2 Http POST请求将图像文件发送到服务器以进行s3上传

0 个答案: