javascript - 使用 Multer 将图像保存在 MongoDB 后端作为来自 Angular 的文件，它无法正常工作

Question

我面临一个我认为不起作用的问题。
我确实以 Angular 安装了一个库 cropper.js https://github.com/matheusdavidson/angular-cropperjs在前端，我正在处理开发人员开发这个库的一些代码。
所以我的迭代将是这样的。
裁剪后的图像将被发送到后端的我的 api 并在那里保存文件并在其他地方显示文件。
实际裁剪它保存了与 blob 的链接，还有我的 img。
发布请求它可以工作，我可以看到文件夹中存在 img 但是当我尝试获取图像时它可以工作，但是在前端的控制台中它告诉我。GET http://localhost:4200/images/image-1607708300007.jpg 404 (Not Found)但在 GET请求它是那里的图像。

{"_id":"5fd3bf6f946e9c40163d82f3",
 "imageTitle":"undefined",
 "imageDesc":"undefined",
 "imageUrl":"/images/image-1607712623266.jpg",
 "uploaded":"2020-12-11T18:50:23.288Z","__v":0}

但是，如果我尝试使用 postman 来获取它，它就无法正常工作。
我正在像这样尝试 postman 。 http://localhost:4200/images/image-1607713934301.jpg它与控制台中的错误消息相同。

`<pre>Cannot GET /images/image-1607713934301.jpg</pre>`

如果我尝试记录它发送到后端的前端的内容，我确实有类似的东西。 console.log(req.file);

   { fieldname: 'file',
  originalname: 'acf6a796-7b4b-4b12-b429-1d21352f3a45.jpeg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  destination: '/Users/abedinzhuniqi/Projects/xxxx/images',
  filename: 'image-1607712623266.jpg',
  path:
   '/Users/abedinzhuniqi/Projects/xxxx/images/image-1607712623266.jpg',
  size: 1540633 }

这是我的前端代码。
这是html。

<angular-cropper #angularCropper
[cropperOptions]="imgConfig"
 [imageUrl]="imgUrl | safeurl"></angular-cropper>
 <div class="btn-group">
      <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file" >
        <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*" (change)="fileChangeEvent($event)">
        <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="Import image with Blob URLs">
          <span class="fa fa-upload"></span>
        </span>
      </label>
    </div>
<button type="button" class="btn btn-primary" data-method="crop" title="Crop" (click)="saveImage()">
        <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="cropper.crop()">
          <span class="fa fa-check"></span>
        </span>
      </button>

这是我的 TS。

  imgUrl = "";
  image: Image;
  imageURL;


   imgConfig = {
    aspectRatio : 3/4,
    dragMode : "move",
    background : true,
    movable: true,
    rotatable : true,
    scalable: true,
    zoomable: true,
    viewMode: 1,
    checkImageOrigin : true,
    checkCrossOrigin: true
};

  fileChangeEvent(event: any): void {
  this.imgUrl = URL.createObjectURL(event.target.files[0]);
  this.image = event.target.files[0];
  }
saveImage() {
  console.log(this.image);
   const file = new File([this.imgUrl], this.image.type);
  this.imageService.addImage(this.image, file).subscribe((res: any) => {
    if (res.body) {
     this.imageService.getImageByID(res.body._id).subscribe((t: Image) => {
     this.imageURL = t.imageUrl;
     });
    }
  }, (err: any) => {
    console.log(err);
  });
}

这是服务

export class ImageService {
   apiUrl = environment.backend;

  constructor(private http: HttpClient) { }


  addImage(image: Image, file: File): Observable<any> {
    const formData = new FormData();
    formData.append("file", file);
    formData.append("imageTitle", image.imageTitle);
    formData.append("imageDesc", image.imageDesc);
    const header = new HttpHeaders();
    const params = new HttpParams();

    const options = {
      params,
      reportProgress: true,
      headers: header
    };
    const req = new HttpRequest("POST", this.apiUrl, formData, options);
    return this.http.request(req);
  }
  getImageByID(id: string): Observable<any> {
    const url = `${this.apiUrl}/${id}`;
    return this.http.get<Image>(url).pipe(
      catchError(this.handleError)
    );
  }
  private handleError(error: HttpErrorResponse): any {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    return throwError(
      'Something bad happened; please try again later.');
  }

}

我的后端 API 看起来像这样。

    const multer  = require('multer');
    const Image = require("../models/image");


    const storage = multer.diskStorage({
    destination: (req, file, cb) => {
      console.log(cb);
      cb(null, path.join(__dirname, '../../../../images'));
    },
    filename: (req, file, cb) => {
      var filetype = '';
      if(file.mimetype === 'image/gif') {
        filetype = 'gif';
      }
      if(file.mimetype === 'image/png') {
        filetype = 'png';
      }
      if(file.mimetype === 'image/jpeg') {
        filetype = 'jpg';
      }
      cb(null, 'image-' + Date.now() + '.' + filetype);
    }
});

const upload = multer({storage: storage});
routes.get('/:id', function(req, res, next) {
    Image.findById(req.params.id, function (err, gallery) {
        if (err) return next(err);
        res.json(gallery);
    });
});
  
// post data
routes.post('/', upload.single('file'), function(req, res, next) {
    if(!req.file) {
        return res.status(500).send({ message: 'Upload fail'});
    } else {
        req.body.imageUrl = req.file.filename;
        Image.create(req.body, function (err, image) {
            if (err) {
                console.log(err);
                return next(err);
            }
            res.json(image);
        });
    }
});

Answer 1

您的服务器应该发送图像内容。目前，您只响应包含图像路径的 JSON，而不是图像本身。为此，您需要添加 static文件中间件:

app.use('/images', express.static(path.join(process.cwd(), '../images'))

然后你应该让你的主机产生正确的 URL，你需要像这样更新从服务器返回的对象:

routes.get('/:id', function(req, res, next) {
    Image.findById(req.params.id, function (err, gallery) {
        if (err) return next(err);
        res.json({
            ...gallery.toJSON(),
            imageUrl: `//${req.host}:${req.port}/${gallery.imageUrl}`,
        });
    });
});

因此，您将为您提供静态内容并在前端接收正确的 URL。