发送的回复晚于1条回复

时间:2019-01-15 15:26:59

标签: javascript node.js angular

我从Node.js服务器收到的响应始终是1个响应。按下该“上传”按钮后,我将始终收到应该收到的回复。

启动节点服务器后,响应为空。在过去四个小时内一直在尝试无数次尝试,但我无法解决。

我从bodyParser切换到一个名为express-busboy的库来上传文件,因为我不必重新编写整个代码。应用程序中的其他所有内容仍然可以正常运行,因此我开始认为问题可能与库中的文件上传部分有关。

这是我的节点代码,很抱歉,阅读起来可能有点乏味,但是我在这里真的迷失了,这是阻止我前进的唯一原因。

这是我的后端代码。

import * as fse from 'fs-extra';

export default class PhotoController{

  private postError = [];
  private postSuccess = [];

  public postPhotos =  (req, res) => {
    const fileArray = Array.isArray(req.files.file) ? req.files.file : new Array(req.files.file);
    const body = new Array(req.body);
    const item = body[0].item;
    const staticFileDest = `C:\\Users\\JP\\Desktop\\MiMApp\\MiMBackEnd\\movedUploads`;
     for (let i = 0; i < fileArray.length; i++){
      const removeDest = `./uploads/${fileArray[i].uuid}`;
      const newName =  Array.isArray(body[0].newName)? body[0].newName[i] : body[0].newName;
      const srcFile = `./${fileArray[i].file}`;
      const moveDest = `${staticFileDest}\\${item}\\${newName}`;
       fse.pathExists(moveDest)
        .then(exists => {
          if (exists){
          this.postError.push(`Fichier ${newName} existe deja.`);
          this.removeSrcFile(removeDest);
          } else {
            fse.move(srcFile, moveDest)
              .then( () => {
                const commentToAdd = Array.isArray(body[0].comment) ? body[0].comment[i] : body[0].comment;
                const commentPath = moveDest.replace(/\.[^/.]+$/, "").concat('.txt');
                this.postSuccess.push(`Fichier ${newName} à été ajouté dans l'item : ${item}`);
                this.removeSrcFile(removeDest);
                fse.writeFile(commentPath, commentToAdd)
                  .then(() => {this.postSuccess.push(`Le commentaire à été ajouté pour ${newName}`)})
                  .catch(() => {this.postError.push(`Le commentaire pour ${newName} existe deja.`)});
              })
              .catch(() => {
                this.postError.push(`Le fichier ${newName} n'a pas été rajouté correctement.`);
               this.removeSrcFile(removeDest);
               this.removeSrcFile(moveDest);
              });
           }
        });
     }
      this.sendResponse(res);
      this.resetErrors();
  };

  private removeSrcFile(file){
    fse.remove(file)
      .then(() => {})
      .catch(() => {this.postError.push(`${file} n'a pas pu être éffacé.`)});
  }

  private resetErrors(){
    this.postError = [];
    this.postSuccess = [];
  }

  private sendResponse(res){
    if (this.postError.length > 0){
      res.send({success : this.postSuccess, errors : this.postError});
    } else {
      res.send({success: this.postSuccess});
    }

  }

}

前端:

onUpload()
  {
    const filesToUpload = new FormData();
    for (const values of this.selectedFile){
      filesToUpload.append('file', values.file);
      filesToUpload.append('newName', values.name);
      filesToUpload.append('comment', values.comment ? values.comment : 'Aucun commentaire.');
    }
    filesToUpload.append('item', this.itemNumber);
    this.photoService.postPictures(filesToUpload)
        .subscribe(
            res => {
              if (res){
                this.postResponse = res;
              } else {
                this.openUnexpectedModal();
              }
            },
            err => {
              this.openUnexpectedModal();
            },
            () => {
              this.openResponseModal();

            }
        )
  }

服务:

export class PhotoService {

    constructor(private http: HttpClient, private config: Config) {}

    public postPictures = (datas): Observable<any> => {
        return this.http.post(`${this.config.apiAddress}/postPictures`, datas)
            .pipe(
                map(data => {return data})
            );
    }
}

我提交时的第一反应:

{"success":[]}

如果我再次提交:

{"success":["Fichier 15012019-YEDwo.jpg à été ajouté dans l'item : 55","Le commentaire à été ajouté pour 15012019-YEDwo.jpg"]}

1 个答案:

答案 0 :(得分:1)

您执行了一个异步函数,但是发送函数this.sendResponse(res);被同步触发了。

 fse.move(srcFile, moveDest)
              .then( () => {
                ...
}

这意味着fse.move运行时,您已经发送了请求,而this.postSuccess只是在private postSuccess = [];处初始化的一个空数组。 fse.move第二次完成,这就是为什么您的响应中充满了数据。