element-ui 多图上传和删除 经验

<el-form-item label="照片"   required>
    <el-upload action="/api.php/up/shangchuan" name="fk" list-type="picture-card" :on-remove="handleRemove" :file-list="form.pic" :on-success="et_shangchuan"  :before-upload="beforeAvatarUpload" multiple :limit="4" :on-exceed="on_exceed">
        <i class="el-icon-plus"></i>
    </el-upload>
</el-form-item>

在设置了 :file-list="form.pic" 之后

正常的逻辑是  上传成功后 项数组  form.pic 追加数据

//图集上传图片成功
et_shangchuan(file)
{
  
    this.form.pic.push(file)
},

虽然结果没啥问题但是 效果上有点问题 他会多空出一块在回到原位置

我的解决方案是

不向绑定的数组里追加数据 借助一个临时的 数组

//图集上传图片成功
et_shangchuan(file)
{
    file.up=1  //这个地方代表是新上传的
    this.form.demo.push(file)
},

 这样的话的 就没有多空出一块的效果了  

2、删除对应的图片

如果 up=0  就在原数组 form.pic里面 找数据

如果up=1 就在临时的数组里找数据

//删除图片
handleRemove(file) {

    if(file.response)
    {
        if(file.response.up==0)
        {
            var url=file.response.url
            var index=me.form.pic.findIndex(item => item.url ==url)
            me.form.pic.splice(index, 1)
        }
        else
        {
            var url=file.response.url
            var index=me.form.pic.findIndex(item => item.url ==url)
            me.form.demo.splice(index, 1)
        }

    }
    else
    {
        if(file.up==0)
        {
            var url=file.url
            var index=me.form.pic.findIndex(item => item.url ==url)
            me.form.pic.splice(index, 1)
        }
        else
        {
            var url=file.url
            var index=me.form.pic.findIndex(item => item.url ==url)
            me.form.demo.splice(index, 1)
        }
    }

    console.log(file)

},

3、后端在修改和新增数据的时候

需要把 原始素组 pic 和 临时的temp 统一都追加进来   。

$piclist=$post['pic'];
$demolist=$post['demo'];

$pic=array();

foreach ($piclist as $pv)
{
    array_push($pic,$pv);
}
foreach ($demolist as $dv)
{
    array_push($pic,$dv);
}

4、后端在返回原数组数据的时候设置up=0

这样的话 修改数据的时候 就可以 识别出来 哪个新 原始的 哪个是新 上传的

foreach ($pic as $v)
{
   $list=array(
       'url'=>$v['url'],
       'up'=>0
   );
    array_push($rows,$list);
}
return $rows;