MEAN app:Multer不工作。无法从前端

时间:2018-03-22 18:09:01

标签: javascript node.js angular mean-stack

所以我现在一直试图上传图像,但它似乎无法正常工作。在我的模板中选择后,我将图像发送到我的服务。在服务中,我将它发送到我的node.js服务器。在这个node.js服务器中,我使用Multer来处理图像文件,但是它会引发错误。

有人能看出原因吗?我上传图片真的很新,所以我不知道从哪里开始。此外,我的错误并不具体,所以我无法缩小范围。 ( user.service.ts?edaa:20后端返回代码500,正文为:[object Object]

我要上传的文件是.png文件

node.js后端:我尝试使用Multer处理文件上传,但是它返回错误。

var multer = require('multer');

const storage = multer.diskStorage({
    destination: '../public/uploads/',
    filename: function (req, file, cb) {
        cb(null, file.fieldName + '-' + Date.now() + path.extname(file.originalname))
    }
});

const upload = multer({
    storage: storage
}).single('myImage');


router.post('/uploadProfilePicture/:userId', function(req, res){
    upload(req, res, function (err){
    if (err) {
        res.status(500).json({
            msg: "whatever"
        })
    } else {
        console.log(req.file);
        res.status(200).json({
            msg: "sup brah"
        })
    }
});
});

User.service文件:我是否可能需要添加一些标题

postFile(fileToUpload: File, userId) {
        const formData: FormData = new FormData();
        console.log(fileToUpload);
        formData.append('fileKey', fileToUpload, fileToUpload.name);

        return this.http.post("http://localhost:3200/user/uploadProfilePicture/" + userId, formData)
            .map(() => { return true; })
            .catch((e) => this.handleError(e));
    }

profile.component.ts

fileToUpload: File = null;

handleFileInput(files: FileList){
        this.fileToUpload = files.item(0);
        this.uploadFileToActivity();
    }

    uploadFileToActivity() {
        this.userService.postFile(this.fileToUpload, localStorage.getItem('userId')).subscribe(data => {
            console.log(data)
        }, error => {
            console.log(error);
        });
    }

profile.component.html

<div class="col-md-8 col-md-offset-2 profilePicSection">
        <div class="form-group">
            <label for="file">Choose File</label>
            <input type="file"
                   id="file"
                   (change)="handleFileInput($event.target.files)">
        </div>
    </div>

页面和控制台的屏幕截图

Screenshot of the page and console

0 个答案:

没有答案