无法使用javascript

时间:2017-02-19 14:58:12

标签: javascript angular file-upload onlyoffice

我们已在应用程序中集成了OnlyOffice编辑器。我想将一个.docx文件从我的PC上传到OnlyOffice服务器,以便我们以后可以使用它进行编辑。我正在使用formdata向服务器发出POST请求,但它无法正常工作。以下是我的javascript代码:

app.post('/topic/:id/upload', (req, res) => {
  docManager.init(__dirname, req, res);
  //docManager.storagePath(''); // mkdir if not exist
  const userIp = docManager.curUserHostAddress();
  const uploadDir = `./public/${configServer.get('storageFolder')}/${userIp}`;
  const form = new formidable.IncomingForm();
  form.uploadDir = uploadDir;
  form.keepExtensions = true;

  form.parse(req, (err, fields, files) => {
    const file = files.uploadedFile;
    file.name = docManager.getCorrectName(file.name);

    if (configServer.get('maxFileSize') < file.size || file.size <= 0) {
      fs.unlinkSync(file.path);
      res.writeHead(200, { 'Content-Type': 'text/plain' });
      res.write('{ "error": "File size is incorrect"}');
      res.end();
      return;
    }

    const exts = [].concat(
      configServer.get('viewedDocs'),
      configServer.get('editedDocs'),
      configServer.get('convertedDocs')
    );
    const curExt = fileUtility.getFileExtension(file.name);

    if (exts.indexOf(curExt) === -1) {
      fs.unlinkSync(file.path);
      res.writeHead(200, { 'Content-Type': 'text/plain' });
      res.write('{ "error": "File type is not supported"}');
      res.end();
      return;
    }

    fs.rename(file.path, `${uploadDir}/${file.name}`, (err2) => {
      res.writeHead(200, { 'Content-Type': 'text/plain' });
      if (err2) {
        res.write(`{ "error": "${err2}"}`);
      } else {
        res.write(`{ "filename": "${file.name}"}`);

        const userid = req.query.userid ? req.query.userid : 'uid-1';
        const firstname = req.query.firstname ? req.query.firstname : 'Jonn';
        const lastname = req.query.lastname ? req.query.lastname : 'Smith';

        docManager.saveFileData(file.name, userid, `${firstname} ${lastname}`);
        docManager.getFileData(file.name, docManager.curUserHostAddress());
      }
      res.end();
    });
  });
});

一开始,在form.parse()调用中,有一个文件数组。这个数组是空的。因此,我得到的错误是:

  

TypeError:无法读取属性&#39; name&#39;未定义的

以下是我的组件代码:

uploadFile(topicId: any, files: File[]) {
    this.fileToUpload = files[0];
    let apiUrl = "/topic/" + topicId + "/upload";
    let headers = new Headers();
    headers.append('authorization', 'Bearer ' + localStorage.getItem('id_token'));
    headers.append('Access-Control-Allow-Origin', '*');
    let data = new FormData();
    data.append('file', this.fileToUpload);
    this.ooApiService.postUrl(apiUrl, data, {headers})
     .toPromise()
     .catch(
       (error: any) => this.handleError(error)
     );
  }

HTML code:

  <form action="/upload" enctype="multipart/form-data" method="post">
    <input class="chooseFile" id="uploadedFile" type="file" [disabled]="isChosen" #fileInput (change)="chooseImage(fileInput.files)"/>
    <button *ngIf="userCanEditDetails" md-raised-button color="primary" (click)="uploadFile(topic.id, fileInput.files)">
      {{ "Upload file" | translate }}
    </button>
  </form>

我正从我的客户端应用程序调用此POST请求,该应用程序位于angular2中,从那里我选择并将文件作为formdata传递。 有人可以帮我解决这个问题吗? 提前谢谢。

1 个答案:

答案 0 :(得分:0)

我想提醒您注意使用集成示例的事实。 此应用程序用于演示文档编辑器功能,不建议在生产环境中使用。 根据您提供的信息,该文件刚刚未发送到ONLYOFFICE服务器

请注意,测试示例的默认版本完全正常,要了解为什么在更改之后它不起作用我们还需要分析客户端部分。请将代码如何上传到文档管理器中。 发送POST请求时,您可能没有发送包含文件详细信息的内容。