将上传的文件从 Javascript 发送到 C# 端点

Question

我有这段代码可以将文件附加到从 javascript 发送到 C# 端点的集合中的某个索引。

const data = row.querySelector(`td[data-bs-column="Action"]`); 

                                if (data) {
                                    const uploadElement = data.querySelector("input[type='file']");
                                    if (uploadElement && uploadElement.files.length > 0) {
                                        const files = Array.from(uploadElement.files);
                                       // formData.append(`vm.Items[${itemIndex}].Attachment`, file);
                                        if (files && files.length > 0) {
                                            files.forEach((file, index) => { 
                                                formData.append(`Items[${itemIndex}].Attachments`, file);
                                            }); 
                                        }
                                    } 
                                }




//ENDPOINT
 [HttpPost, Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
    public async Task<IActionResult> JSUpdateEvaluationItems(PerformanceViewerViewModel vm)
    {
        var files = HttpContext.Request.Form.Files; //TEST TO CHECK IF THE FILE IS RECEIVED
        var result = await performanceRepository.UpdateEvaluationItems(vm);
        return Json(result.ToString());
    }

正如您在这里看到的，我添加了这行代码

var files = HttpContext.Request.Form.Files; //TEST TO CHECK IF THE FILE IS RECEIVED

来检查发送到端点的formdata是否有文件。它有从客户端收到的文件。

现在，我端点上的视图模型是这样设计的

public class PerformanceViewerViewModel : BaseModel
    { 
        public Credentials? Credentials { get; set; }
        public Credentials? KRAOwner { get; set; }
        public List<Entities.Users.Role>? Roles { get; set; }
        public PerformanceConfiguration? Configuration { get; set; }
        public PerformanceInformation? Information { get; set; } 
        public List<Category>? Categories { get; set; }
        public List<Goal>? Goals { get; set; }
        public List<Item>? Items { get; set; }
        public List<Status>? Statuses { get; set; }
        public List<CycleApprover>? Approvers { get; set; }
        public List<SelectListItem>? StatusItems { get; set; }
        public List<AppraisalItem>? AppraisalItems { get; set; }
        public List<Unit>? Units { get; set; }
        public List<Column>? Columns { get; set; }
    }

接收附件的对象是

List<Item>? Items

。

但是当我检查项目内的附件时，没有附加文件。

模型Item是这样设计的

public class Item : BaseModel
    {
        public Guid ParentTempID { get; set; } 
        public int ItemID { get; set; }
        public int GoalID { get; set; }
        public string? ItemName { get; set; }
        public decimal ItemPercentage { get; set; }
        public int UnitID { get; set; }
        public string? UnitName { get; set; }
        public bool Ratio { get; set; }
        public string? Consolidated { get; set; }
        public string? Result { get; set; }
        public decimal ItemWeight { get; set; }
        public bool OverrideWeight { get; set; }
        public int ActiveCommentID { get; set; }
        public List<IFormFile>? Attachments { get; set; }
        public List<CompanyTarget>? CompanyTargets { get; set; }
        public List<string>? Filenames { get; set; }
    }

Answer 1

事实证明，我只需要在将文件添加到列表中时删除索引>。

这是完美运行的解决方案。

files.forEach((file, fileIndex) => { 
                                                    formData.append(`vm.Items[${itemIndex}].Attachments`, file);
                                                }); 

只需删除 .Attachments[${fileIndex}] 上的索引即可。

如果需要，可以删除 forEach 循环上的 fileIndex。我很懒所以我不会删除它。