elementui新增或修改时，el-upload上传组件回显预览删除（el-upload上传图片base64给后端）

实现功能：

     addOrUpdate.vue新增或修改时，修改需要可以回显图片，上传图片后要可以预览以及删除。

     当页面有多个字段涉及上传单图的，也可以使用子组件作为公共的组件引入。

     这里前后端关于图片的交互都是base64字符串，所以回显和上传提交的也都是base64字符串。

图片：

el-upload照片墙只上传一张，隐藏另一张参考的是如下链接：
        https://blog.csdn.net/weixin_59395272/article/details/128649347

 上传预览实现效果图如下：

父组件

     多个字段需要用到这个公共的上传组件，加type字段进行区分（示例是父组件页面多字段上传图片）。

     如果只有一个字段上传图片，也是可以用子组件的，一个字段的话就不用加判断

      getChildParam 和 getUploadChildData修改为更简单的直接赋值。

  注意点：

 
 showUpload默认设置为true，保证每次子组件都进一次mounted方法

关键示例代码如下：

 
         

           
        
        


      
        

          
        
      


      
        

          
        
        


// 传给子组件的数据 ，用于子组件回显和区分
getChildParam(type,title){
	var obj = new Object();
	obj.type = type;
	obj.title = title;
	obj.fileList =[];
	
	switch(type){
		case '1':
			obj.fileList = this.frontImgList; // 获取详细信息的时候赋值frontImgList 主要是为了回显
		break;
		case '2':
			obj.fileList = this.backImgList;
		break;
		case '3':
			obj.fileList = this.sideImgList;
		break;
	
	}
	return obj;

},

//接收子组件上传的base64格式的图片url，赋值给想传给后端的对象
getUploadChildData(obj){
	switch(obj.type){
		case '1':
			this.frontImgUrl = obj.url;  
		break;
		case '2':
			this.backImgUrl = obj.url;  
		break;
		case '3':
			this.sideImgUrl = obj.url;  
		break;
	
	}

}

子组件

el-upload照片墙只上传一张，隐藏另一张参考如下链接：
        https://blog.csdn.net/weixin_59395272/article/details/128649347

    这是抽取一个公共的上传组件，同一个页面或不同页面（有一个或多个字段需要上传图片，但是字段都只需要上传一张图片）需要上传的时候可以引入这个公共的上传组件。

注意点：

      mounted 和hideAnother 解决的是页面正常回显了后端返回的图片，然后隐藏另一个多余的上传框，如果页面不涉及回显的话可以忽略这两个方法的处理。

      setTimeOut要加，避免还获取不到页面元素。

util.js图片转base64

// 转base64  el-upload上传的file 不能直接用，要用file.raw
// 文件对象转base64
export  function getBase64Url (file) {
	return  new Promise ((resolve,reject) =>{
			  const reader = new FileReader(); //实例化文件读取对象
			  reader.readAsDataURL(file.raw); //将文件读取为 DataURL,也就是base64编码
			 reader.onload = function () {
				resolve(reader)
			 }
			 reader.onerror = function (error) {
				reject(error)
			 }
	
	})
   
}