无法使用multer和angular上传图片

时间:2021-01-02 20:35:39

标签: angular express multer

我正在尝试使用 multer(express.js 服务器端和 Angular 客户端)上传图片。由于某种原因,我不断收到一个空的 formData 数组,这是日志: enter image description here 现在是代码: 服务:

AddPicture(formdata: any){
        return this.http.post<any>(environment.api + "products/add-image",{
            formdata
        })
    }

ts 代码:

onFileSelected(event:any){
    if(event.target.files.length > 0){
      this.selectedFile = event.target.files[0]
      this._images = this.selectedFile;
    }
  }  

  AddImage(){
    const formdata = new FormData();
    formdata.append('file', this._images)
    console.log(formdata)

    this._product.AddPicture(formdata).subscribe(
      (data:any) => {
        console.log(data)
      },
      (error:any) =>  console.log("error trying to add new image")
    )
  }

HTML:

<form>
    <input type="file" name="image" multiple (change)="onFileSelected($event)" />
    <button type="submit" (click)="AddImage()">upload</button>
</form>

API

const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null, "upload");
  },
  filename: (req, file, callback) => {
    callback(
      null,
      `${file.fieldname}-${file.name}` + path.extname(file.originalname)
    );
  },
});
var upload = multer({ storage: storage }).single("myImage");
router.post("/add-image", (req, res) => {
  upload(req, res, (err) => {
    if (err) {
      console.log(err);
    } else {
      console.log(req.file);
    }
    res.send(file);
  });
});

0 个答案:

没有答案