在 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 方法。
