当我们使用 ant-design Upload上传组件进行编辑功能回显时，不能使用使用 action上传，自己手续一个自定义上传因此我们要这样设置。
<Upload listType="picture-card" fileList={fileLists[name]} // maxCount={1} //上传文件之前的钩子 beforeUpload={(e) => { handleChanges(e, name) }} ={(e) => { handleRemoves(e, name) }} > <div> <PlusOutlined /> <div style={{ marginTop: 8 }}>Upload</div> </div> </Upload>
因为我们要做的是编辑回显获取的数据形式为[{ url: 图片路径, uid: 图片标识 }]导致方式图片显示数组fileLists导致自动上传无法返回路径，使用beforeUpload事件不使用onChange是因为，onChange做图片上传会和onRemove事件冲突，当删除图片时两个事件会一起执行所以我们使用beforeUpload避开事件冲突。
编辑回显图片上传
// 编辑图片上传事件 const handleChanges = (file, name) => { let arr = fileLists console.log(file); let param = new FormData(); param.append("file", file); axios({ url: "/api/common/upload", method: "post", data: param }).then(res => { console.log(res.data); if (res.data.code == 1) { //uid的作用防止上传相同图片key值报错和方便onRemove删除 arr[name].push({ url: '域名' + res.data.url, uid: file.uid }); } //要使用[...arr]这样的格式存放数组，否则新增图片数据无法再页面及时显示 setFileLists([...arr]); console.log(arr); }); };
编辑回显图片删除
const handleRemoves = (file, name) => { console.log(file); //获取被删除图片路径和uid let arr = fileLists; //筛选图片路径数组中相同uid的元素获取其下标 let index = arr[name].findIndex((val) => { return val.uid == file.uid }) //删除对应下标元素 arr[name].splice(index, 1) console.log(arr); //更新数组 setFileLists([...arr]) return false; }
这样可以根据uid删除对应的图片路径，不会和.filter删除一样因为路径相同而多删除图片
