Antd Dragger+Mobx剪贴板图片上传问题：文件未触发上传

直接修改Mobx Store里的fileList只会更新UI显示，Antd Upload组件不会自动触发上传流程——它的上传逻辑只在自身的选择/拖拽交互时才会启动。要让剪贴板添加的文件也能触发上传，需要手动调用Upload组件的上传API，以下是具体实现步骤：

步骤1：给Dragger组件添加Ref，获取Upload实例 #

修改ImageUploader组件，通过useRef获取Antd Upload的实例，并存入Store中：

const ImageUploader: React.FC<IProps> = inject('uploader')(observer((props: IProps) => {
    const uploadRef = useRef<Upload>(null);

    // 组件挂载后把Ref传给Store
    useEffect(() => {
        props.uploader.setUploadRef(uploadRef.current);
    }, []);

    const antUploaderProps = {
        name: 'file',
        multiple: true,
        listType: 'picture' as UploadListType,
        action: props.uploader.url,
        progress: 'line' as ProgressProps,
        fileList: props.uploader.files, 
        disabled: props.uploader.inactive,
        onChange(info: UploadChangeParam<UploadFile<any>>) {
            props.uploader.handleOnChange(info);
        }
    };

    return (
        <div> 
            <Dragger ref={uploadRef} className={props.uploader.inactive ? "inactive-element" : ""} {...antUploaderProps}>
                <p className="ant-upload-drag-icon"><InboxOutlined /></p>
            </Dragger>
        </div>
    );
}));

步骤2：在Store中添加上传方法和Ref存储 #

修改ImageUploaderStore，增加存储Upload实例的属性和手动触发上传的方法：

export default class ImageUploaderStore {
    @observable
    uploadRef: Upload | null = null;

    // ...其他原有属性

    @action
    setUploadRef(ref: Upload | null) {
        this.uploadRef = ref;
    }

    @action
    uploadFile(file: UploadFile) {
        if (!this.inactive && this.uploadRef) {
            // 调用Antd Upload的手动上传API
            this.uploadRef.upload(file);
        }
    }

    // ...其他原有方法
}

步骤3：修改剪贴板粘贴逻辑，触发上传 #

在主面板的handlePaste中，只给激活的上传器触发上传（不用手动调用setFile，因为upload方法会自动将文件加入fileList并触发onChange）：

const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {   
    if (event.clipboardData.files.length) {
        const ff = event.clipboardData.files[0];

        const file: UploadFile = {
            name: ff.name,
            size: ff.size,
            type: ff.type,
            uid: uuid(),
            originFileObj: ff
        };
        
        // 只给当前激活的上传器触发上传
        if (!photoUploaderStore.uploader.inactive) {
            photoUploaderStore.uploader.uploadFile(file);
        } else if (!solutionUploaderStore.uploader.inactive) {
            solutionUploaderStore.uploader.uploadFile(file);
        }
    }
};

注意事项 #

• 确保上传的action地址（即props.uploader.url）已经正确设置（taskId已赋值），否则会上传失败；
• 若需要兼容旧逻辑，也可以保留setFile调用，但upload方法本身会自动维护fileList，所以可以省略。

内容的提问来源于stack exchange，提问作者Alina Didenko