上传Angular 4 / Express后,每次都要建立查看图像

时间:2018-01-26 15:51:17

标签: angular express multer ng2-file-upload

我使用ng2-file-upload和multer在我的应用程序中上传图片。除了每次上传后收到的错误消息外,上传本身也能正常工作。

    { Error: ENOENT: no such file or directory, unlink 'C:\Users\afram\projects\qs4\public\assets\img\file-2-1516970214633.jpeg'
    at Error (native)
    at Object.fs.unlinkSync (fs.js:1089:18)
    at deleteImg (C:\Users\afram\projects\qs4\logic\post\roomRequest.js:64:16)
    at response (C:\Users\afram\projects\qs4\logic\post\roomRequest.js:37:21)
    at changeReturn (C:\Users\afram\projects\qs4\logic\database\databaseHandler.js:701:7)
    at Query._callback (C:\Users\afram\projects\qs4\logic\database\databaseHandler.js:483:7)
    at Query.Sequence.end (C:\Users\afram\projects\qs4\node_modules\mysql\lib\protocol\sequences\Sequence.js:88:24)
    at Query._handleFinalResultPacket (C:\Users\afram\projects\qs4\node_modules\mysql\lib\protocol\sequences\Query.js:139:8)
    at Query.OkPacket (C:\Users\afram\projects\qs4\node_modules\mysql\lib\protocol\sequences\Query.js:72:10)
    at Protocol._parsePacket (C:\Users\afram\projects\qs4\node_modules\mysql\lib\protocol\Protocol.js:279:23)
  errno: -4058,
  code: 'ENOENT',
  syscall: 'unlink',
  path: 'C:\\Users\\afram\\projects\\qs4\\public\\assets\\img\\file-2-1516970214633.jpeg' 

问题是,在我上传图片后,我无法查看它,直到我重建我的应用程序。

这里是快递/闷热代码。

// File upload config Declaring Diskstorage for use with Multer. Sets destination and filename on server
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './src/assets/img/')
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + file.originalname + '.' + file.mimetype.split('/')[1]);
    }
});

//upload variable is a Multer object. Uses a diskstorage and sets additional paramaters. Defines filesize and upload type
var upload = multer({ storage: storage, limits: { fileSize: 524288 } }).single('file');

/** API path that will upload the files */
router.post('/upload', function (req, res) {

    upload(req, res, function (err) {
        console.log(req.file);
        if (err) {
            res.json({ error_code: 1, err_desc: err });
            return;
        }
        res.json({ error_code: 0, err_desc: null });
    })
});

Angular 4代码

  ...

  uploader = new FileUploader({url: '/api/uploadTest'});

  ...

  this.uploader.onAfterAddingFile = f => {
    f.file.name = data.room.number + '-' + new Date().getTime();
    if (this.uploader.queue.length > 1) {
      this.uploader.removeFromQueue(this.uploader.queue[0]);
    }
  }

  ...

  if(this.uploader.queue.length > 0) {
      this.uploader.queue[0].upload();
  }

  ...

模板

  <div ng2FileDrop  [uploader]="uploader">
    <input type="file" ng2FileSelect [uploader]="uploader" accept="image/*">
  </div>
  <img  height="100%" width="100%" *ngIf="uploader.queue.length == 0" [src]="'../../../..' + data.room.imgLink">
  <div *ngFor="let item of uploader.queue;">
      <img height="100%" width="100%" src="" imgPreview [image]="item?._file"/>
  </div>

1 个答案:

答案 0 :(得分:1)

不确定问题是什么,但我添加了一条路线,用于将图像提取到我的快递文件中,现在它就像一个魅力。