ant-design Upload上传组件使用 编辑功能图片回显

当我们使用 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删除一样因为路径相同而多删除图片