ant-design Upload上传组件使用 action上传

在 ant-design 的 Upload 组件中，可以使用 action 属性来指定上传文件的接口地址。当用户选择文件并点击上传按钮时，组件会将文件发送到该接口进行处理。

<Upload
     listType="picture-card"
  // fileList={fileLists}
  // maxCount={1}
     multiple
  //路径
     action="/api/common/upload"
  //上传图片文件名称
     name="file"
     onChange={(e) => { handleChange(e) }}
     onRemove={(e) => { handleRemove(e) }}
>
     <div> 
         <PlusOutlined />
         <div style={{ marginTop: 8 }}>Upload</div>
     </div>
</Upload>

如果要获取上传图片的数据返回路径可以设置onChange事件

   const handleChange = ({ file, fileList }) => {
        //判断上传图片文件是否上传完成
        if (file.status == "done") {
            //获取上传路径
            console.log(file.response);
            //判断上传图片路径是否成功
            if (file.response.code == 1) {
                //获取路径获放入数组
                fileLists[name].push(file.response.url);
                setFileLists(fileLists);
            }
            console.log(fileLists);
        }
    };

如果要删除放入数组的图片路径可以设置onRemove事件

 const handleRemove = (file) => {
        console.log(file.response);
        //获取删除的图片路径，判断是否与存放路径的数组中是否有相同，有则去除
        fileLists[name] = fileLists[name].filter(function (item) {
            return item !== file.response.url
        })
        console.log(fileLists);
    }

这样当用户选择文件并点击上传按钮时，该方法会被调用，并打印出要上传的文件对象，或删除存储数组中的对应路径，一个基本图片上传就完成了。

注意：action 属性需要指定一个有效的接口地址，用于接收上传的文件。同时，你还可以使用 method 属性来指定请求的方法，默认为 post 方法。