fix(Upload): remove not work

[RylanBot]

🤔 这个 PR 的性质是？

• 日常 bug 修复
• 新特性提交
• 文档改进
• 演示代码改进
• 组件样式/交互改进
• CI/CD 改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他

🔗 相关 Issue

复现代码1

import React, { useState } from 'react';
import { Button, MessagePlugin, Space, Upload } from 'tdesign-react';

import type { UploadProps } from 'tdesign-react';

export default function UploadExample() {
  const [files, setFiles] = useState([]);

  const handleFail: UploadProps['onFail'] = ({ file }) => {
    MessagePlugin.error(`文件 ${file.name} 上传失败`);
  };

  const handleReset = () => {
    setFiles([]);
    MessagePlugin.info('已点击重置：setFiles([])');
  };
  const handleSubmit = () => {
    console.log('提交时的 files:', files);
    MessagePlugin.success('已点击提交，请查看控制台 files4');
  };

  return (
    <Space direction="vertical">
      <div style={{ border: '1px dashed #d9d9d9', padding: 16, borderRadius: 4 }}>
        <p style={{ marginBottom: 12, color: '#e34d59' }}>
          复现场景：选择任意文件触发上传失败 → 点击 「重置」按钮 → 失败文件无法被清除
        </p>
        <Upload
          theme="file-flow"
          files={files}
          onChange={setFiles}
          multiple
          autoUpload
          // 使个一定会上传失败的接口地址来复现失败状态
          action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/not-exist-will-fail"
          placeholder="支持任意文件，最多 10 个"
          max={10}
          formatResponse={(res) => ({ ...res, error: '上传失败，请重试' })}
          onFail={handleFail}
        />
        <Space style={{ marginTop: 12, justifyContent: 'flex-end', width: '100%' }}>
          <Button theme="default" onClick={handleReset}>
            重置
          </Button>
          <Button theme="primary" onClick={handleSubmit}>
            提交
          </Button>
        </Space>
      </div>
    </Space>
  );
}

复现代码2

import React from 'react';
import { Form, Upload } from 'tdesign-react';

import type { RequestMethodResponse, UploadFile } from 'tdesign-react';

const { FormItem } = Form;

export default function UploadInFormDemo() {
  const [form] = Form.useForm();

  // Mock upload: multiple 模式下 requestMethod 接收的是 UploadFile[]
  const mockUpload = (files: UploadFile | UploadFile[]): Promise<RequestMethodResponse> =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve({ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } });
      }, 500);
    });

  return (
    <Form form={form} labelWidth={100}>
      <FormItem label="附件" name="values">
        <Upload style={{ width: '100%' }} theme="file-flow" requestMethod={mockUpload} draggable multiple autoUpload />
      </FormItem>
    </Form>
  );
}

💡 需求背景和解决方案

【日志 1 相关】

• 初始文件 []，失败后也是 []，无法触发 UI 变化

（感觉有些设计有些缺陷...UI 显示了失败文件，但数据没变）

• 非 autoUpload 模式下，所有状态都在 uploadValue 里，符合直觉的
• autoUpload 模式，把非成功文件分流到了内部 state （？)

📝 更新日志

• 本条 PR 不需要纳入 Changelog

tdesign-react

• fix(Upload): 修复上传失败后重置文件没有触发 UI 变化的问题
• fix(Upload): 修复组件在 Form 下时，需要点击多次才能触发删除的问题

@tdesign-react/chat

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• Changelog 已提供或无须提供

[tdesign-bot]

TDesign Component Site Preview Open

Component	Preview
tdesign-react
@tdesign-react/chat

[pkg-pr-new]

• tdesign-react-demo

  npm i https://pkg.pr.new/Tencent/tdesign-react@4232
  

  npm i https://pkg.pr.new/Tencent/tdesign-react/@tdesign-react/chat@4232
  

commit: d5d5843

[RylanBot]

复现代码 2 与日志 2 相关
FormItem.updateFormValue 的 isEqual 守卫，splice 污染原数组，误判为没有变化

场景对比

import React, { useState } from 'react';
import { Form, Space, Upload } from 'tdesign-react';

import type { RequestMethodResponse, UploadFile } from 'tdesign-react';

const { FormItem } = Form;

export default function UploadInFormDemo() {
  const [form] = Form.useForm();

  const mockUpload = (): Promise<RequestMethodResponse> =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve({ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } });
      }, 500);
    });

  return (
    <Space direction="vertical" size={24}>
      <div>
        <p>Form 下【Bug】</p>
        <Form form={form} labelWidth={100}>
          <FormItem name="values">
            <Upload
              style={{ width: '100%' }}
              theme="file-flow"
              requestMethod={mockUpload}
              draggable
              multiple
              autoUpload
            />
          </FormItem>
        </Form>
      </div>

      <div>
        <p>不在 Form 下 / 非受控模式</p>
        <Upload style={{ width: '100%' }} theme="file-flow" requestMethod={mockUpload} draggable multiple autoUpload />
      </div>

      <div style={{ marginTop: 24 }}>
        <p>不在 Form 下 / 受控模式</p>
        <ControlledUpload mockUpload={mockUpload} />
      </div>
    </Space>
  );
}

function ControlledUpload({ mockUpload }: { mockUpload: () => Promise<RequestMethodResponse> }) {
  const [files, setFiles] = useState<UploadFile[]>([]);

  return (
    <Upload
      style={{ width: '100%' }}
      theme="file-flow"
      requestMethod={mockUpload}
      draggable
      multiple
      autoUpload
      files={files}
      onChange={setFiles}
    />
  );
}