DevExpress DxUpload实现大文件上传

最新推荐文章于 2024-12-22 14:26:17 发布

原创

最新推荐文章于 2024-12-22 14:26:17 发布 · 490 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#DEVEXPRESS

该博客展示了前端文件上传的API控制器实现，使用了DevExpress相关组件。代码中定义了文件大小、类型、存储路径等参数，实现了临时文件清理、文件处理、文件追加等功能，包含UploadFile和Upload两个文件上传接口，并对文件大小和类型进行了检查。

前端实现在如下

@inherits ProductionOrderComponentBase

<ProcessingSpiner Visible="@IsComponentBusy"/>

@if (IsValidating)
{
    <LoadingProcess />
}
else
{
    if (ComponentMode == ComponentMode.List)
    {
        <div class="position-relative">
            <div class="@(IsDetailBusy ? "component-backdrop" : null)"></div>

            <WarningModal WarningMessage="@WarningMessage"
                          WarningResponse="@HandleWarningResponse"
                          @bind-IsShowWarning="@IsShowWarning"/>

            <DxDataGrid CustomData="@LoadProductionOrders"
                        KeyFieldName="@KeyFieldName"
                        CssClass="@CssClass"
                        PageSize="@PageSize"
                        PageIndex="@PageIndex"
                        SelectionMode="@SelectionMode"
                        SelectAllMode="@SelectAllMode"
                        ShowFilterRow="IsShowFilterRow"
                        RowClick="@OnRowClick"
                        LayoutRestoring="@OnLayoutRestoring"
                        PagerPageSizeSelectorVisible="true"
                        PagerAllDataRowsItemVisible="true"
                        PagerAllowedPageSizes="@AllowedPageSizes"
                        @bind-MultipleSelectedDataRows="@SelectedCollection"
                        @ref="@Grid"
                        T="@ProductionOrderWithDetail">

                <HeaderTemplate>
                    <DataGridToolbar IsBusy="@(IsBusy || IsMasterBusy || IsDetailBusy)"
                                     CssClass="@ToolbarCssClass"
                                     SelectedCount="@SelectedCount"
                                     RequiredClaimType="@RequiredClaimType"
                                     OnToolbarClick="@HandleToolbarResponse"
                                     CanRestore="@CanRestore"
                                     ReadOnly="@ReadOnly">
                        @if (ReadOnly == false)
                        {
                            <DxToolbarItem Text="Generate Delivery Sheet"
                                           Click="@GenerateInventoryRequest"
                                           IconCssClass="mdi mdi-18px mdi-file-move-outline"
                                           Enabled="@(IsBusy == false)"
                                           CssClass="font-bigger"
                                           Visible="@CanEdit"/>

                            <DxToolbarItem Text="上传"
                                           id="overviewDemoSelectButton1" 
                                           IconCssClass="mdi mdi-18px mdi-file-move-outline"
                                           Enabled="@(IsBusy == false)"
                                           CssClass="font-bigger"
                                           Visible="@CanEdit" /> 
                            <DxUpload Name="myFile"
                                      Visible=true
                                      ExternalSelectButtonCssSelector="#overviewDemoSelectButton1"
                                      ExternalDropZoneCssSelector="#overviewDemoDropZone"
                                      ExternalDropZoneDragOverCssClass="bg-light border-secondary text-dark" 
                                      ChunkSize="2000000"
                                      MaxFileSize=999999999
                                      UploadUrl="@GetUploadUrl("/api/Files/UploadFile/")"
                                      CssClass="w-100">
                            </DxUpload>
                        }
                    </DataGridToolbar>

                    
                </HeaderTemplate>

                <Columns>
                    @* <DxDataGridSelectionColumn Width="60px"/> *@
                    <DxDataGridColumn Field="@nameof(ProductionOrderWithDetail.OrderNumber)"
                                      Caption="No."
                                      Width="100px">
                        <DisplayTemplate>
                            @{
                                var requestNumb = $"{((ProductionOrderWithDetail) context).OrderNumber:000000}";
                                <span>@requestNumb</span>
                            }
                        </DisplayTemplate>
                    </DxDataGridColumn>
                    <DxDataGridDateEditColumn Field="@nameof(ProductionOrderWithDetail.OrderDate)"
                                              DisplayFormat="dd/MM/yyyy"
                                              Width="100px"
                                              Caption="Date"
                                              Visible="false"/>
                    <DxDataGridDateEditColumn Field="@nameof(ProductionOrderWithDetail.DueDate)"
                                              DisplayFormat="dd/MM/yyyy"
                                              Width="100px"
                                              Caption="Due Date"/>
                    <DxDataGridDateEditColumn Field="@nameof(ProductionOrderWithDetail.CompletedDate)"
                                              DisplayFormat="dd/MM/yyyy"
                                              Width="100px"
                                              Caption="Completed Date"