拖拽文件上传时Request.Files.Count为0且Fetch请求失败的问题求助

我仔细看了你遇到的拖拽上传问题，结合你的代码分析下来，主要有几个核心原因导致了Request.Files.Count为0和Fetch请求的TypeError: Failed to fetch错误，下面给你一步步的解决方案：

一、核心问题：后端依赖按钮点击事件，但Fetch请求不会触发它 #

ASP.NET WebForms的事件模型是基于页面的事件触发机制的——你现在把上传逻辑写在btnUpload_Click按钮点击事件里，但通过Fetch直接POST到Default.aspx时，并没有触发按钮的点击事件，所以这段代码根本不会执行，自然Request.Files.Count始终为0。

解决方案：修改后端处理逻辑，直接在Page_Load中处理上传请求 #

把上传逻辑移到Page_Load事件中，专门处理POST的上传请求，而不是依赖按钮点击。这样不管是Fetch请求还是按钮点击，都能复用同一个处理逻辑：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    ' 判断是否是上传请求：POST方法+multipart/form-data类型
    If Request.HttpMethod = "POST" AndAlso Request.ContentType.StartsWith("multipart/form-data") Then
        HandleFileUpload()
        Response.End() ' 处理完后终止响应，避免返回整个页面内容
    End If
End Sub

Private Sub HandleFileUpload()
    If Request.Files.Count > 0 Then
        Dim uploadedFiles As HttpFileCollection = Request.Files
        Dim savedFiles As New List(Of String)()

        Try
            Dim uploadDir As String = Server.MapPath("~/Uploads/")
            ' 确保上传目录存在，不存在则创建
            If Not Directory.Exists(uploadDir) Then
                Directory.CreateDirectory(uploadDir)
            End If

            For i As Integer = 0 To uploadedFiles.Count - 1
                Dim file As HttpPostedFile = uploadedFiles(i)
                If file.ContentLength > 0 Then
                    ' 生成唯一文件名，避免覆盖同名文件
                    Dim fileNameWithoutExt As String = Path.GetFileNameWithoutExtension(file.FileName)
                    Dim fileExt As String = Path.GetExtension(file.FileName)
                    Dim uniqueFileName As String = $"{fileNameWithoutExt}_{DateTime.Now.Ticks}{fileExt}"
                    Dim savePath As String = Path.Combine(uploadDir, uniqueFileName)
                    
                    file.SaveAs(savePath)
                    savedFiles.Add(uniqueFileName)
                End If
            Next

            ' 返回成功的JSON响应
            Response.ContentType = "application/json"
            Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(New With {
                .success = True,
                .files = savedFiles
            }))
        Catch ex As Exception
            ' 返回错误的JSON响应
            Response.ContentType = "application/json"
            Response.StatusCode = 500 ' 设置错误状态码
            Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(New With {
                .success = False,
                .message = ex.Message
            }))
        End Try
    Else
        ' 没有接收到文件时返回错误
        Response.ContentType = "application/json"
        Response.StatusCode = 400
        Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(New With {
            .success = False,
            .message = "未接收到任何上传文件"
        }))
    End If
End Sub

' 保留原按钮点击事件，可用于手动上传按钮
Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As EventArgs)
    HandleFileUpload()
End Sub

二、前端Fetch请求的问题：缺少WebForms必要的表单字段 #

ASP.NET WebForms的POST请求需要携带__VIEWSTATE、__VIEWSTATEGENERATOR等隐藏字段，否则页面会拒绝请求或处理异常，这也是导致Failed to fetch错误的常见原因。

解决方案：在FormData中添加表单的隐藏字段 #

修改你的uploadFilesToServer方法，把表单中的隐藏字段添加到FormData中：

uploadFilesToServer(filesArray) {
    const formData = new FormData();
    const form = document.getElementById('form1'); // 你的表单ID

    // 把表单中的所有隐藏字段（如__VIEWSTATE）添加到FormData
    Array.from(form.elements).forEach(element => {
        if (element.type === 'hidden' && element.name) {
            formData.append(element.name, element.value);
        }
    });

    // 添加要上传的文件
    filesArray.forEach(file => {
        formData.append("files", file);
    });

    console.log("Uploading files...", formData);

    fetch(this.config.uploadUrl, {
        method: "POST",
        body: formData
    })
    .then(response => {
        // 先检查响应是否成功（状态码200-299）
        if (!response.ok) {
            throw new Error(`服务器返回错误状态: ${response.status}`);
        }
        return response.json(); // 后端返回JSON，直接解析
    })
    .then(data => {
        console.log("Server Response:", data);
        if (data.success) {
            alert(`上传成功！共上传${data.files.length}个文件`);
            this.uploadedFiles = [...this.uploadedFiles, ...data.files];
        } else {
            alert(`上传失败: ${data.message}`);
        }
    })
    .catch(error => {
        console.error("Upload failed:", error);
        alert(`上传失败：${error.message}，请查看控制台详情`);
    });
}

三、其他需要检查的细节 #

1. 大文件上传限制：如果上传大文件，需要在web.config中修改请求大小限制：

<configuration>
  <system.web>
    <!-- maxRequestLength单位是KB，这里设置为1GB -->
    <httpRuntime maxRequestLength="1048576" executionTimeout="3600" />
  </system.web>
  <system.webServer>
    <security>
      <requestFiltering>
        <!-- maxAllowedContentLength单位是Bytes，这里设置为1GB -->
        <requestLimits maxAllowedContentLength="1073741824" />
      </requestFiltering>
    </security>
  </system.webServer>
</configuration>

2. 权限问题：确保应用程序池对~/Uploads/目录有读写权限，否则保存文件会报错。
3. FormData的键名：你用的是formData.append("files", file)，后端Request.Files会正确识别这个键名，不需要修改。

备注：内容来源于stack exchange，提问作者CDVS