Angular6 Переименовать файл для загрузки - PullRequest
Новая
       34

Angular6 Переименовать файл для загрузки

0 голосов
/ 08 октября 2018

Я использую Angular6 и NodeJS для своего API.МОЕ приложение - это школьное программное обеспечение, в котором я должен сохранять изображения учащихся с их регистрационными номерами.Я использую ng2-file-upload в Angular для загрузки файлов и Multer в NodeJS, загрузка работает отлично, но я не могу понять , как переименовать файл с помощьюрегистрационный номер студента . Мой URL в Angular состоит из регистрационного номера студента , мне просто нужно знать , как отправить этот Рег.Номер NodeJS и переименуйте файл с помощью Reg.Номер

Мой HTML-файл 

<input type="file" name="photo" ng2FileSelect [uploader]="uploader" />

<button type="button" class="btn btn-success btn-s" 
  (click)="uploader.uploadAll()" 
  [disabled]="!uploader.getNotUploadedItems().length" >
      Upload an Image
</button>

Мой файл .ts 

public uploader: FileUploader = new FileUploader({url: URL, itemAlias: 'file'});
  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
         console.log('ImageUpload:uploaded:', item, status, response);
         alert('File uploaded successfully');
     };
  }

My NodeJS Multer Загрузить: 

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'E:/school')
    },
    filename: function (req, file, cb) {
      cb(null, Date.now() + '-' + file.originalname);
    }
  });

  var upload = multer({ storage: storage });

  router.post('/upload', upload.single('file'), (req, res) => {
      if (!req.file) {
        console.log("No file received");
        return res.send({
          success: false
        });

      } else {
        console.log('file received');
        return res.send({
          success: true
        })
      }
  });

Заранее спасибо.Любая помощь будет оценена.

Ответы [ 2 ]

0 голосов
/ 26 июля 2019

Будьте осторожны : это решение должно работать, однако этот код уродлив и, вероятно, не лучший способ сделать то, что вы хотите.Но это просто, чтобы показать вам, как вы можете переименовать ваш файл на внешней стороне.

Важно: Я предполагаю, что вы загружаете один файл, потому что мы будем использовать первый элементuploader.queue для этого примера.

Во-первых, вы можете добавить текст ввода типа в ваш HTML-файл чуть ниже вашего входного файла: 


<input *ngIf="uploader.queue.length" type="text" name="file" [value]="uploader.queue[0].file.name"
       (change)="renameFile($event.target.value)"/>

Этот ввод будет показан, когда вы будетезагрузить файл.(change) вызовет функцию renameFile в вашем компоненте с текущим значением ввода.

Затем обновите ваш компонент TS, добавив метод renameFile: 

renameFile(name: string): void {
    // fetching the item uploaded
    const oldFileItem: FileItem = this.uploader.queue[0];
    // re-instanciating a new file based on the old file by changing the name property
    const newFile: File = new File([this.uploader.queue[0]._file], name, {type: oldFileItem.file.type});
    // uploader.queue is taking FileItem objects, instanciating a new FileItem
    const newFileItem = new FileItem(this.uploader, newFile, this.opts);

    // replacing the old one by the new file updated
    this.uploader.queue[0] = newFileItem;
  }

Наконец, вы можетевзгляните на свойство файла в вашем console.log внутри функции onCompleteItem, файл был обновлен.

0 голосов
/ 08 октября 2018

Вы сможете наблюдать за событием onFileSelected и получить файл [0] (если вы загружаете один файл).И установите file[0].name перед загрузкой.

...