处理vue elementui图片回显编辑/修改/删除

需求elementui提供啦美观的控件支持页面快速开发，

这里结合jq来实现控件图片上传后的回显问题，回显还能进行编辑，效果如下

 

 

代码：

 

html中加入:file-list="fileList"

在created中加入后台请求的操作，我这里我是后台渲染好的数据，

直接从页面抽取出来，目的是获取后台返回的图片地址，

然后对地址进行改造，如下 

<el-upload
      action="#"
      list-type="picture-card"
      accept="image/jpeg,image/jpg,image/png"
      :show-file-list="true"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="uploadFileMethod">

   <i class="el-icon-plus"></i>
</el-upload>

js代码中也要定义一个

我们的data中加入 fileList: [],

    data: {
                dialogImageUrl: '',
                dialogVisible: false,
                fileList: [],
                headers: {
//                'Content-Type': 'application/x-www-form-urlencoded'
//                'Content-Type': 'multipart/form-data'
                },

created:function(){fileList
        var that=this; 
        var list=[];
    $("#tabImage").find(".products13").each(function (i) {
        var file =$("#itemMain_imageVOList_"+i+"__filePath").val();//需要回显的图片地址，如 http://demo.comb2b.com/imagesupload/28221/small/AAAA-009.png
        let index = file.lastIndexOf('\/'); //获取最后那个“/”的位置 ，正整数类型
        let fileName  = file.substring(index + 1, file.length);// 切割出“/”之后的字符串，获取到图片名称
        var obj =new Object();
        obj.url=file;
        obj.name=fileName;//名字得有，删除操作的时候是需要传入图片名称去判断要删除掉哪一个
        list.push(obj);
    });
    that.=list; //把处理完的图片数据赋值给绑定的对象属性，让其回显到页面
},

 

这里根据自己的页面结构进行处理，处理的目的是将表单中input数据删除掉，让他不能提交给后台，实现前端编辑后台也能持久化的效果

handleRemove:function(file, fileList) {//删除操作
    $("#tabImage").find(".productsPic").each(function (i) {

        var val = $("#itemMain_imageVOList_"+i+"__filePath").val();
        if(val.indexOf(file.name)>0){
            $(this).remove();
        }
    });
},

至此，结束