以下是一个使用Ant Design和Reactjs的示例代码，演示了如何实现拖拽上传并停止上传列表加载的功能：

import React, { useState } from 'react';
import { Upload, Button, Icon, message } from 'antd';

const Dragger = Upload.Dragger;

const UploadComponent = () => {
  const [fileList, setFileList] = useState([]);
  const [uploading, setUploading] = useState(false);
  const [stopUploading, setStopUploading] = useState(false);

  const handleUpload = () => {
    const formData = new FormData();
    fileList.forEach(file => {
      formData.append('files', file);
    });

    // 发起上传请求
    // 这里可以使用axios或其他HTTP库发送请求
    // 根据需要处理上传进度等其他逻辑
    // 此处只是简单的演示
    setUploading(true);
    setTimeout(() => {
      if (stopUploading) {
        message.error('上传已停止');
        setUploading(false);
        setStopUploading(false);
        setFileList([]);
      } else {
        message.success('上传成功');
        setUploading(false);
        setFileList([]);
      }
    }, 2000);
  };

  const handleRemove = file => {
    setFileList(fileList.filter(item => item.uid !== file.uid));
  };

  const handleStopUpload = () => {
    setStopUploading(true);
  };

  const uploadProps = {
    multiple: true,
    fileList,
    beforeUpload: file => {
      setFileList([...fileList, file]);
      return false;
    },
    onRemove: handleRemove,
  };

  return (
    

      
        

          
        
        
点击或拖拽文件到此区域进行上传
      
      
        {uploading ? '上传中' : '开始上传'}
      
      {uploading && (
        
          停止上传
        
      )}
    
  );
};

export default UploadComponent;

上述代码创建了一个名为UploadComponent的组件，其中包含一个Dragger组件用于实现拖拽上传功能。fileList存储上传的文件列表，uploading表示当前是否正在上传，stopUploading表示是否停止上传。

在handleUpload函数中，使用formData将文件列表添加到表单数据中，然后可以使用HTTP库发送上传请求。在示例中，使用setTimeout模拟上传过程，并根据stopUploading的值来模拟停止上传。

handleRemove函数用于移除文件列表中的文件。

uploadProps是传递给Dragger组件的属性对象，其中包含beforeUpload和onRemove等属性，用于处理文件的添加和移除。

在界面上，用户可以点击或拖拽文件到Dragger组件区域进行上传。点击"开始上传"按钮后，会调用handleUpload函数开始上传。如果点击"停止上传"按钮，则会调用handleStopUpload函数停止上传。

需要注意的是，上述代码只是一个简单的示例，实际使用中，可能需要根据需求进行适当的修改和完善。