如何在不将数据上传到服务器的情况下使用 Devextreme Angular 文件上传器

Question

我想使用 Devextreme angular 的文件上传器组件来解析 javascript 中的一些数据，但我似乎找不到办法，而不是 post数据先到服务器。

我可以使用 xlsx 库和 html input 标签及其 change 事件解析 javascript 中的数据：

<input type='file' (change)="onSelectFile($event)" multiple>

和.ts:

onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      const filesAmount = event.target.files.length;
      for (let i = 0; i < filesAmount; i++) {
        const reader = new FileReader();

        reader.onload = (event:any) => {

          const bstr: string = event.target.result;
          const data = <any[]>this.excelService.importFromFile(bstr);
          // data is ready
        };
        reader.readAsBinaryString(event.target.files[i]);
      }
    }
  }

我可以阻止文件上传器上传数据到服务器，这样我可以先在客户端解析它吗？我想使用这个组件，因为它提供开箱即用的验证和正确的样式。

谢谢

Answer 1

我建议使用 uploadMode 选项的 'useForm' 值但不要提交表单。

Answer 2

你可以试试

<dx-file-uploader
  selectButtonText="Upload File"
  labelText="or Drop here"
  accept="*"
  uploadMode="useForm"
  [allowCanceling]="true"
  (change)="handleInputChange($event)"
></dx-file-uploader>

如何在不将数据上传到服务器的情况下使用 Devextreme Angular 文件上传器

How to use Devextreme Angular File uploader without uploading data to server

devextreme

angular

devextreme-angular