Question

我将Angular6和NodeJS用于我的API。我的应用程序是学校软件，我应该在其中保存学生图像及其注册号。我在Angular中使用 ng2-file-upload 进行文件上传，在NodeJS中使用 Multer ，上传工作正常，但是我不明白如何重命名文件，注册号为Student 。 我在Angular中的网址由学生注册编号组成，我只需要知道如何发送该Reg。编号为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');
     };
  }

我的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
        })
      }
  });

预先感谢。任何帮助将不胜感激。

Answer 1

您可以在将formData发布到后端之前编辑名称。提供文件名（或从表单获取），并从要上传的文件获取文件扩展名。然后附加到formData，然后再发布到后端。

参考：https://stackoverflow.com/a/55178342和https://youtu.be/v67NunIp5w8

  let fileToUpload = <File>files[0];
  let fileName:string = 'test-name' //get name from form for example
  let fileExtension:string = fileToUpload.name.split('?')[0].split('.').pop();

  const formData = new FormData();
  formData.append('file', fileToUpload, fileName+'.'+fileExtension);

  this.http.post(environment.backendApiUrl+'/api/upload', formData, {reportProgress: true, observe: 'events'})
    .subscribe(event => {
      if(event.type === HttpEventType.UploadProgress) {
        this.progress = Math.round(100 * event.loaded / event.total);
      } else if (event.type === HttpEventType.Response) {
        this.message = 'Upload success.';
        this.onUploadFinished.emit(event.body);
      }
    });

Answer 2

您应该能够观看onFileSelected事件并获取文件[0]（如果您是单个文件上传）。并在上传前设置file[0].name。

Answer 3

您不能从前端重命名文件。它必须在服务器端。

Answer 4

注意：此解决方案应该可以工作，但是此代码很丑陋，可能不是执行所需操作的最佳方法。但这只是向您展示如何在前端重命名文件。

重要：我假设您正在上传单个文件，因为在此示例中，我们将使用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函数。

然后通过添加renameFile方法来更新您的TS组件：

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;
  }

最后，您可以在onCompleteItem函数内的console.log中查看文件属性，文件已更新。

Angular6重命名要上传的文件

4 个答案: