Angular中dx-file-uploader无法在dx-data-grid内正常工作的问题

实现步骤 #

1. 将dx-file-uploader嵌入网格的编辑表单 #

你的网格使用form编辑模式，直接在dxo-editing内部添加dxo-form配置，把上传组件作为表单自定义项加入，这样上传组件会在新增/编辑弹窗中显示，和其他表单字段联动。

修改后的tab.component.html代码：

<div id="data-grid-demo">
  <dx-data-grid
    id="gridContainer"
    [dataSource]="dataSource"
    keyExpr="ID"
    [showBorders]="true"
    (onSaving)="onSaving($event)"
  >
    <dxo-paging [enabled]="false"></dxo-paging>
    <dxo-editing
      mode="form"
      [allowUpdating]="true"
      [allowAdding]="true"
      [allowDeleting]="true"
    >
      <!-- 自定义编辑表单，加入文件上传项 -->
      <dxo-form>
        <dxi-item itemType="group" [colCount]="2">
          <dxi-item dataField="Prefix" caption="Title" [width]="70"></dxi-item>
          <dxi-item dataField="FirstName"></dxi-item>
          <dxi-item dataField="LastName"></dxi-item>
          <dxi-item dataField="Position" [width]="170"></dxi-item>
          <dxi-item dataField="StateID" caption="State" [width]="125">
            <dxo-lookup [dataSource]="states" displayExpr="Name" valueExpr="ID"></dxo-lookup>
          </dxi-item>
          <dxi-item dataField="BirthDate" dataType="date"></dxi-item>
          <!-- 文件上传表单项 -->
          <dxi-item caption="Upload File" [colSpan]="2">
            <dx-file-uploader
              #fileUploader
              selectButtonText="Select File"
              labelText="No file selected"
              accept="*"
              uploadMode="instant"
              [uploadUrl]="uploadApiUrl"
              (onValueChanged)="onFileSelected($event)"
              (onUploaded)="onFileUploaded($event)"
            ></dx-file-uploader>
          </dxi-item>
          <dxi-item dataField="Notes" [colSpan]="2">
            <dxo-form-item editorType="dxTextArea" [editorOptions]="{ height: 100 }"></dxo-form-item>
          </dxi-item>
        </dxi-item>
      </dxo-form>
    </dxo-editing>

    <!-- 网格列配置保持不变 -->
    <dxi-column dataField="Prefix" caption="Title" [width]="70"></dxi-column>
    <dxi-column dataField="FirstName"></dxi-column>
    <dxi-column dataField="LastName"></dxi-column>
    <dxi-column dataField="Position" [width]="170"></dxi-column>
    <dxi-column dataField="StateID" caption="State" [width]="125">
      <dxo-lookup [dataSource]="states" displayExpr="Name" valueExpr="ID"></dxo-lookup>
    </dxi-column>
    <dxi-column dataField="BirthDate" dataType="date"></dxi-column>
    <dxi-column dataField="Notes" [visible]="false"></dxi-column>
  </dx-data-grid>
</div>

2. 完善TypeScript逻辑 #

在tab.component.ts中添加事件处理，管理文件选择、上传状态，并在保存数据时关联文件信息：

import { Component, ViewChild } from '@angular/core';
import { DxFileUploaderComponent } from 'devextreme-angular';
import { SaveEvent } from 'devextreme/ui/data_grid';

@Component({
  selector: 'app-tab',
  templateUrl: './tab.component.html',
  styleUrls: ['./tab.component.css']
})
export class TabComponent {
  dataSource: any[]; // 你的业务数据源
  states: any[]; // 状态选项数据源
  uploadApiUrl = 'https://your-actual-upload-api'; // 替换为后端上传接口地址
  @ViewChild('fileUploader') fileUploader: DxFileUploaderComponent;
  currentSelectedFile: any;

  // 文件选中事件
  onFileSelected(event: any) {
    this.currentSelectedFile = event.value[0]; // 暂存当前选中文件信息
  }

  // 文件上传完成事件
  onFileUploaded(event: any) {
    // 上传完成后可记录文件ID/路径，关联到当前编辑行数据
    console.log('文件上传完成:', event.file);
  }

  // 网格保存事件
  onSaving(event: SaveEvent) {
    const submitFormData = new FormData();
    // 追加选中的文件到表单
    if (this.currentSelectedFile) {
      submitFormData.append('file', this.currentSelectedFile);
    }
    // 追加表单其他字段数据
    submitFormData.append('formData', JSON.stringify(event.data));

    // 阻止网格默认保存行为，手动提交数据
    event.cancel = true;
    
    // 调用后端接口提交文件和表单数据
    fetch(this.uploadApiUrl, {
      method: 'POST',
      body: submitFormData
    }).then(response => {
      // 处理响应，比如刷新网格数据源
      // 示例：根据实际业务调整数据源更新逻辑
      this.dataSource = [...this.dataSource, event.data];
    }).catch(error => {
      console.error('上传失败:', error);
    });
  }
}

关键注意事项 #

• 上传模式选择：useForm模式下DevExtreme表单不会自动携带上传文件，更推荐用instant模式即时上传，再将文件信息关联到业务数据。
• 数据源同步：文件上传并提交业务数据后，需手动刷新网格数据源，或调用后端接口获取最新数据。
• 版本兼容：上述代码适配DevExtreme 21.2.5版本的API规范。

内容的提问来源于stack exchange，提问作者Anshul Uniyal