[英]Upload image and Json from Angular to Multer/Express
I would like to upload an image and a json to a server using Express and Multer. 我想使用Express和Multer将图像和json上传到服务器。 When I test with Postman there is no problem but when I test with the Front-end in Angular, it seems that the image isn't sent. 当我使用Postman进行测试时,没有问题,但是当我使用Angular中的前端进行测试时,似乎未发送图像。
Here are the codes : 以下是代码:
problem-form.component.html problem-form.component.html
<div class="problemContainer">
<div class="problemForm">
<h2>Soumission de problème</h2>
<form [formGroup]="form" (ngSubmit)="submitForm()">
<p>
<mat-form-field class="inputFW">
<input matInput formControlName="User" placeholder="Adresse email">
<mat-error>This field is required</mat-error>
</mat-form-field>
</p>
<p>
<mat-form-field class="inputFW">
<input matInput value="{{machineName}}" placeholder="Nom de la machine" disabled>
<mat-error>Le nom de la machine est requis</mat-error>
</mat-form-field>
</p>
<p>
<mat-form-field class="inputFW">
<textarea matInput placeholder="Description du problème (max 200 caractères)" formControlName="Description" rows="3"></textarea>
</mat-form-field>
</p>
<p>
<label>Image (Optionnel)</label><br><br>
<input type="file" (change)="fileChange($event)" name="image" />
</p>
<button mat-raised-button color="primary">Envoyer</button>
</form>
</div>
function in the component that call the service 调用服务的组件中的函数
submitForm(){
if(this.form.valid){
let obj = this.form.value
obj.image = this.image
this.service.createProblem(obj).subscribe(data => console.log(data), err => {console.log(err)})
}else{
console.log("erreur")
}
}
function in the service that post to the server 发布到服务器的服务中的功能
createProblem(problem: Object){
console.log('roman')
let form = new FormData()
form.append('Name', problem['Name'])
form.append('Description', problem['Description'])
form.append('User', problem['User'])
form.append('image', problem['image'])
console.log(problem['image'])
return this.http.post(getUrl()+ `problems`, form);
}
Configuration of multer 粉碎机的配置
let storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'images')
},
filename: function (req, file, cb) {
cb(null, 'problem_' + Date.now()+'.'+mime.extension(file.mimetype))
}
})
let upload = multer({ storage: storage });
The route that call a function in the controller 控制器中调用函数的路径
router.route('/')
/** GET /api/problems - Get list of Problems */
.get(pbCtrl.list)
/** POST /api/problem - create a new problem */
.post(/*validate(paramValidation.problem), */upload.single('image'), pbCtrl.create);
The function in the controller 控制器中的功能
function create(req, res, next) {
let photo
if(req.file != null)
photo = req.file.filename
PC.findOne({ Name: req.body.Name, Active: true }, { '_id': 0 }).exec()
.then((pc) => {
if (pc == null)
return res.sendStatus(400)
const newPc = new PC({
Name: pc.Name,
Local: pc.Local,
IP: pc.IP,
MAC: pc.MAC,
Comment: pc.Comment,
Active: pc.Active,
Problem: { User: req.body.User, Description: req.body.Description, Image: photo }
})
newPc.save()
.then(savedPC => {
res.json(savedPC);
//return next();
}).catch(e => { next(e); });;
})
.catch((err) => {
console.log(err)
res.sendStatus(400)
})
}
Thanks all 谢谢大家
Resolved 解决
function to load file 加载文件功能
fileChange($event) {
let reader = new FileReader();
if($event.target.files && $event.target.files.length > 0) {
let file = $event.target.files[0];
this.file = file
}
}
function that submit the form 提交表格的功能
submitForm(){
if(this.form.valid){
let obj = this.form.value
obj.image = this.file
this.service.createProblem(obj).subscribe(data => this.openSnackBar('Votre demande a bien été enregistrée'), err => {console.log(err)})
}else{
console.log("erreur")
}
}
function in the service to post 在服务中发布功能
createProblem(problem: Object){
let form = new FormData()
form.append('Name', problem['Name'])
form.append('Description', problem['Description'])
form.append('User', problem['User'])
form.append('image', problem['image'])
return this.http.post(getUrl()+ `problems`, form).map((res) => {
return res.json()
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.