vue elment-ui 一张与多张图片上传，返回base64编码 thinkphp5

深碍√TFBOYSˉ_ 2022-04-08 19:18 497阅读 0赞

**注意：**  
**action为上传的后台路径地址**  
**imageUrl： 为图像的路径**  
**accept：上传的图片格式可以自定义**  
**$emit：操作后返回对应的数据给父级vue**  
一张图片只给一个路径，  
多张图片需要给一个数组

## 1.element-UI 头像上传，返回一条路径 ##

vue代码
    
    <template>
    	<div>
    		<el-upload
    			  class="avatar-uploader"
    			  :action="uploadUrl"
    			  :show-file-list="false"
    			  name='files'
    			   accept=".png,.gif,.ico"
    			  :on-success="handleAvatarSuccess"
    			  :before-upload="beforeAvatarUpload">
    			  <img v-if="imageUrl" :src="imageUrl" class="avatar">
    			  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    		</el-upload>
    	</div>
    </template>
    
    <script>
    	import Api from '../../Api'
    	export default {
    		name:'servec_type',
    		data() {
    	      	return {
    	      		imageUrl:'',
    	        	fileList: [],
    	        	uploadUrl:Api.upload+'/uploadico',
    	        	upLoadData:{}
    	      	};
    	    },
    	    props:['filesico'],
    	    watch: {
                'filesico': { 
            		immediate:true,
    			    handler:function(files,oldVal){
    					if(files){
    						this.$data.imageUrl = files
    					}else{
    						this.$data.imageUrl = ''
    					}
    					
    			    }
            	} 
            },
    	    methods: {
    			handleAvatarSuccess(res, file) {
    					
    				var str = res;
    				if(this.$data.imageUrl){
    					
    					this.axios.post(Api.upload+"/files_edit",{
    		      				url:this.$data.imageUrl
    		      			}).then(res => {
    						if(res.data.status == 200){
    							this.$message({
    	                    		type: 'success',
    	                    		message: res.data.msg
    		                   });
    						}else{
    							this.$message({
    	                    		type: 'error',
    	                    		message: res.data.msg
    		                   });
    						}
    					});	
    
    					
    				}else{
    					this.$emit('updateicos',str);
    					this.imageUrl = URL.createObjectURL(file.raw);
    				}
    			},
    			beforeAvatarUpload(file) {
    			        const isLt2M = file.size / 1024 / 1024 < 2;
    			
    
    		        if (!isLt2M) {
    		          this.$message.error('上传头像图片大小不能超过 2MB!');
    		        }
    			    return  isLt2M;
    			}
    	    },
    	    created: function () {
            },
    
    	}
    </script>
    
    <style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
      }
      .avatar {
        width: 100px;
        height: 100px;
        display: block;
      }
    </style>

thinkphp后台图片上传实现返回上传的路径地址

public function uploadico(){
            // 获取表单上传文件
            $file = request()->file('files');
            if (empty($file)) {
                $this->error('请选择上传文件');
            }
            // 移动到框架应用根目录/public/uploads/ 目录下
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
            if ($info) {
    //            $this->success('文件上传成功');
                $sql = $info->getSaveName();
                $avator=str_replace('\\','/',$sql);
                $dk = substr($_SERVER['HTTP_HOST'],-4);
                $sql =  "http://localhost:".$dk."/uploads/".$avator;//路径地址可以自己更改
                echo json_encode($sql,JSON_UNESCAPED_SLASHES);
    
            } else {
                // 上传失败获取错误信息
                $this->error($file->getError());
            }
        }
      //    删除图片数据删除文件
        public function files_edit()
        {
            $info_del = input('post.url');
            $result = substr($info_del,strripos($info_del,"uploads"));
            if($result){
                $myFile = $result;
                $fh = fopen($myFile, 'w') or die("can't open file");
                fclose($fh);
    
                $myFile = $result;
                unlink($myFile);
            }
            echo json_encode(array("status"=>200,"msg"=>"修改成功"));
    //        $this->dele_all_data('files',array('belong_id'=>input('post.belong_id'),'name'=>input('post.name')));
    
        }

## 2.element-UI 图片墙或者文件上传，返回路径，上传的后台php与上传一张公用一个方法， ##

<template>
    	<div>
           
    		<el-upload
    		   :action="uploadUrl"
    		   name='files'
    		 
    		   list-type="picture-card"
    		   :on-preview="handlePictureCardPreview"
    		   :on-success="handleAvatarSuccess"
    		  
    		   :file-list="fileList"
    		   :on-remove="handleRemove">
    		  <i class="el-icon-plus"></i>
    		</el-upload>
    		
    		<el-dialog :visible.sync="dialogVisible">
    			<img width="100%" :src="dialogImageUrl" alt="">
    		</el-dialog>
    	</div>
    	
    </template>
    
    <script>
    	import Api from '../../Api'
    	export default {
    		name:'uploadimg',
    		data() {
    	      	return {
    	      		filearr:[],
    	      		fileList:[],
    	      		dialogImageUrl:"",
    	        	uploadUrl:Api.upload+'/uploadimg',
    	        	dialogVisible: false
    	      	};
    	    },
    	    props:['uploadimg'],
            watch: { 
            	'uploadimg': { 
            		immediate:true,
    			    handler:function(files,oldVal){
    					if(files){
    			    		this.$data.fileList = files
    			    		this.$data.filearr = files
    			    	}else{
    			    		this.$data.fileList = []
    			    		this.$data.filearr =  []
    			    	}
    			    }
            	} 
            },
    	    methods: {
    	    	handleRemove(file, fileList) {
    	    		this.axios.post(Api.upload+"/files_edit",{
    	      				url:file.response
    	      			}).then(res => {
    	      				this.$message({
                        		type: 'error',
                        		message: res.data.msg
    	                    });
    						if(res.data.status == 200){
    							var arrs = this.$data.filearr;
    				      		for(var i in arrs){
    				      			if(arrs[i].uid == file.uid){
    				      				arrs.splice(i,1);
    				      			}
    				      		}
    		      				this.$emit('uploadimg',arrs);
    							this.$message({
    	                    		type: 'success',
    	                    		message: res.data.msg
    		                   });
    						}
    				});	
    		    },
    		    imgarr(res, fileList){
    		    	var file_li = {
    	      			name:fileList.name,
    	      			percentage:fileList.percentage,
    	      			url:fileList.response,
    	      			size:fileList.size,
    	      			uid:fileList.uid,
    	      			response:fileList.response
          			}
    	      		this.$data.filearr.push(file_li);
       				this.$emit('uploadimg',this.$data.filearr);
    				
    		    },
    		    handleAvatarSuccess(res, fileList){
    		    	this.imgarr(res,fileList);
    		    },
    		    handlePictureCardPreview(file) {
    		        this.dialogImageUrl = file.url;
    		        this.dialogVisible = true;
    		      }
    	   }
    
    	}
    </script>
    
    <style>
    
    </style>

## 3.element-UI 上传后返回为base64一张图片编码。该出使用了查看功能，没有后台代码。 ##

<template>
    
    	<div class="com-upload-img" style="height: 100%;">
    		<div class="img_group">
    			<ul class="img_box">
    				<li  v-for="(item,index) in imgArr" :key="index">
    					<img :src="item" alt="" />
    
    					<div class="img_box_input">
    						<i class='fa fa-search-plus' @click="lookImg(item,index)"></i>
    						<i class="img_delete fa fa-trash-o fa-lg" @click="deleteImg(index)"></i>
    					</div>
    				</li>
    				<li class="img_input" v-show="button">
    
    					<input type="file" accept="image/*" multiple="multiple" @change="changeImg($event)">
    					<div class="filter">
    						+
    					</div>
    
    				</li>
    			</ul>
    			
    		</div>
    		<el-dialog :visible.sync="dialogVisible" append-to-body>
    		  <img width="100%"  :src="lookimg" alt="">
    		</el-dialog>
    		
    	</div>
    
    </template>
    
    <script>
    	import Vue from 'vue'
    	import Api from '../../Api'
    	export default {
    		name: 'uploadbaselogo',
    		data() {
    			return {
    				imgData: '',
    				imgArr: [],
    				look: false,
    				button : true,
    				imgSrc: '',
    				lookimg: '',
    				dialogVisible:false,
    				allowAddImg: true,
    			}
    		},
    		props: ['img'],
    		watch: {
    			'img': {
    				immediate: true,
    				handler: function(files, oldVal) {
    					if(files){
    						this.imgArr[0] = files
    						this.button = false
    					}else{
    						this.imgArr = []
    						this.button = true
    					}
    					
    				}
    			}
    		},
    		methods: {
    			lookImg(img, index) {
    				this.lookimg = img
    				this.look = true;
    				this.dialogVisible = true;
    			},
    			looknone() {
    				this.look = false
    			},
    			changeImg: function(e) {
    
    				var _this = this;
    				var file = e.target.files[0]
    				var reader = new FileReader()
    				reader.readAsDataURL(file)
    				reader.onload = function() {
    					img.src = this.result
    				}
    				var img = new Image,
    					width = 1024, //image resize   压缩后的宽
    					quality = 0.8, //image quality  压缩质量
    					canvas = document.createElement("canvas"),
    					drawer = canvas.getContext("2d");
    				
    				img.onload = function() {
    					canvas.width = width;
    					canvas.height = width * (img.height / img.width);
    					drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
    					var base64 = canvas.toDataURL("image/png", quality); // 这里就拿到了压缩后的base64图片
    					var imgdata = [];
    					imgdata.push(base64);
    					// 清空文件上传控件的值  不清理会出现选择同样的图片会无法触发input事件了
    					e.target.value = null;
    					_this.imgArr.push(imgdata[0])
    					_this.$emit('uploadbaselogo', _this.imgArr[0]);
    					_this.button = false
    				}
    				
    			},
    			deleteImg: function(index) {
    				
    				this.imgArr.splice(index, 1);
    				if(this.imgArr.length < 5) {
    					this.allowAddImg = true;
    				}
    				this.button = true
    				
    				this.$emit('uploadbaselogo', null);
    			},
    		},
    	}
    </script>
    
    <style scoped="scoped">
    	/*div{
    		margin: 0px;
    		border: none;
    		box-sizing: border-box;
    	}*/
    	
    	.img_box,
    	.img_box li {
    		list-style: none;
    		margin: 0px;
    		padding: 0px;
    		box-sizing: border-box;
    		list-style-type: none;
    		/*background: #000000;*/
    		opacity: 1;
    	}
    	
    	.img_box li {
    		margin: 0px;
    	}
    	
    	.look-img {
    		/*width: 100%;
    		margin: 0px;
    		height: 100%;
    		z-index: 4;
    		background: rgba(0, 0, 0, 0.5);
    		box-shadow: 1px 1px 1px #0055AA;
    		position: fixed;
    		top: 0px;
    		left: 0px;
    		text-align: center;
    		display: table*/
    	}
    	
    	.look-img img {
    		/*margin: auto;
    		width: auto;
    		position: absolute;
    		top: 0;
    		bottom: 0;
    		left: 0;
    		right: 0;
    		
    		border-radius: 5px;*/
    	}
    	
    	.img_box li:hover {
    		box-shadow: 0px 0px 1px 0px #000000;
    		opacity: 0.9;
    	}
    	
    	.img_box li:hover .img_box_input {
    		z-index: 1;
    		opacity: 1;
    	}
    	
    	.img_box_input {
    		top: 0px;
    		position: absolute;
    		padding-top: 30px;
    		width: 100%;
    		z-index: 0;
    		opacity: 0;
    		left: 0px;
    		height: 100%;
    		background: rgba(0, 0, 0, 0.5);
    	}
    	
    	.img_box_input i {
    		margin: 5px;
    		color: #fff;
    		cursor: pointer;
    		padding: 5px;
    	}
    	
    	.img_input {
    		width: 100px;
    		height: 100px;
    	}
    	
    	.img_box input {
    		background: #006699;
    		border: none;
    		opacity: 0;
    		height: 100%;
    		width: 100%;
    		position: absolute;
    		left: 0px;
    		top: 0px;
    		z-index: 2;
    		box-shadow: none;
    	}
    	
    	.img_box .filter {
    		background: #fff;
    		position: absolute;
    		height: 100%;
    		width: 100%;
    		z-index: 1;
    		top: 0px;
    		left: 0px;
    		font-size: 40px;
    		color: #006699;
    		box-sizing: border-box;
    		text-align: center;
    		line-height: 90px;
    		border: 1px dashed #3276B1;
    	}
    	
    	.img_box li {
    		position: relative;
    		float: left;
    		width: 100px;
    		height: 100px;
    		text-align: center;
    		overflow: hidden;
    	}
    	
    	.img_box li img {
    		width: 100%;
    		height: 100%;
    	}
    	
    	.img_box li i {}
    	
    	.img_show_box {
    		width: 100px;
    		position: relative;
    	}
    	
    	.img_delete {
    		/*position: absolute;
    		z-index: 3;
    		color: #F43838;
    		top:45px;
    		left: 50px;
    		width: 20px;
    		height: 20px;*/
    	}
    </style>

## 4.vue element 多张图片返回base64 ##

<template>
    
    	<div class="com-upload-img" style="height: 100%;">
    		<div class="img_group">
    			<ul class="img_box">
    				<li  v-for="(item,index) in imgArr" :key="index">
    					<img :src="item" alt="" />
    
    					<div class="img_box_input">
    						<i class='fa fa-search-plus' @click="lookImg(item,index)"></i>
    						<i class="img_delete fa fa-trash-o fa-lg" @click="deleteImg(index)"></i>
    					</div>
    				</li>
    				<li class="img_input">
    
    					<input type="file" accept="image/*" multiple="multiple" @change="changeImg($event)">
    					<div class="filter">
    						+
    					</div>
    
    				</li>
    			</ul>
    			
    		</div>
    		<el-dialog :visible.sync="dialogVisible" append-to-body>
    		  <img width="100%"  :src="lookimg" alt="">
    		</el-dialog>
    		
    		
    		
    	</div>
    
    </template>
    
    <script>
    	import Vue from 'vue'
    	import Api from '../../Api'
    	export default {
    		name: 'ComUpLoad',
    		data() {
    			return {
    				imgData: '',
    				imgArr: [],
    				look: false,
    				imgSrc: '',
    				lookimg: '',
    				dialogVisible:false,
    				allowAddImg: true,
    			}
    		},
    		props: ['img'],
    		watch: {
    			'img': {
    				immediate: true,
    				handler: function(files, oldVal) {
    					
    					if(files){
    						if(files[0]){
    							this.imgArr = files
    						}else{
    							this.imgArr = []
    						}
    					}
    					
    				}
    			}
    		},
    		methods: {
    			lookImg(img, index) {
    				this.lookimg = img
    				this.look = true;
    				this.dialogVisible = true,
    				this.$emit('uploadbaseimg', this.imgArr);
    			},
    			looknone() {
    				this.look = false
    			},
    			changeImg: function(e) {
    
    				var _this = this;
    				var file = e.target.files[0]
    				var reader = new FileReader()
    				reader.readAsDataURL(file)
    				reader.onload = function() {
    					img.src = this.result
    				}
    				var img = new Image,
    					width = 1024, //image resize   压缩后的宽
    					quality = 0.8, //image quality  压缩质量
    					canvas = document.createElement("canvas"),
    					drawer = canvas.getContext("2d");
    				
    				img.onload = function() {
    					canvas.width = width;
    					canvas.height = width * (img.height / img.width);
    					drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
    					//
    					var base64 = canvas.toDataURL("image/png", quality); // 这里就拿到了压缩后的base64图片
    					
    					var imgdata = [];
    					imgdata.push(base64);
    //					_this.imgArr.push(base64);
    					// 清空文件上传控件的值  不清理会出现选择同样的图片会无法触发input事件了
    					e.target.value = null;
    					_this.imgArr.push(imgdata[0])
    					_this.$emit('uploadbaseimg', _this.imgArr);
    				}
    				
    			},
    			deleteImg: function(index) {
    				
    				this.imgArr.splice(index, 1);
    				if(this.imgArr.length < 5) {
    					this.allowAddImg = true;
    				}
    				this.$emit('uploadbaseimg', this.imgArr);
    			},
    		},
    	}
    </script>
    
    <style scoped="scoped">
    	/*div{
    		margin: 0px;
    		border: none;
    		box-sizing: border-box;
    	}*/
    	
    	.img_box,
    	.img_box li {
    		list-style: none;
    		margin: 0px;
    		padding: 0px;
    		box-sizing: border-box;
    		list-style-type: none;
    		/*background: #000000;*/
    		opacity: 1;
    	}
    	
    	.img_box li {
    		margin: 0px;
    	}
    	
    	.look-img {
    		/*width: 100%;
    		margin: 0px;
    		height: 100%;
    		z-index: 4;
    		background: rgba(0, 0, 0, 0.5);
    		box-shadow: 1px 1px 1px #0055AA;
    		position: fixed;
    		top: 0px;
    		left: 0px;
    		text-align: center;
    		display: table*/
    	}
    	
    	.look-img img {
    		/*margin: auto;
    		width: auto;
    		position: absolute;
    		top: 0;
    		bottom: 0;
    		left: 0;
    		right: 0;
    		
    		border-radius: 5px;*/
    	}
    	
    	.img_box li:hover {
    		box-shadow: 0px 0px 1px 0px #000000;
    		opacity: 0.9;
    	}
    	
    	.img_box li:hover .img_box_input {
    		z-index: 1;
    		opacity: 1;
    	}
    	
    	.img_box_input {
    		top: 0px;
    		position: absolute;
    		padding-top: 30px;
    		width: 100%;
    		z-index: 0;
    		opacity: 0;
    		left: 0px;
    		height: 100%;
    		background: rgba(0, 0, 0, 0.5);
    	}
    	
    	.img_box_input i {
    		margin: 5px;
    		color: #fff;
    		cursor: pointer;
    		padding: 5px;
    	}
    	
    	.img_input {
    		width: 100px;
    		height: 100px;
    	}
    	
    	.img_box input {
    		background: #006699;
    		border: none;
    		opacity: 0;
    		height: 100%;
    		width: 100%;
    		position: absolute;
    		left: 0px;
    		top: 0px;
    		z-index: 2;
    		box-shadow: none;
    	}
    	
    	.img_box .filter {
    		background: #fff;
    		position: absolute;
    		height: 100%;
    		width: 100%;
    		z-index: 1;
    		top: 0px;
    		left: 0px;
    		font-size: 40px;
    		color: #006699;
    		box-sizing: border-box;
    		text-align: center;
    		line-height: 90px;
    		border: 1px dashed #3276B1;
    	}
    	
    	.img_box li {
    		position: relative;
    		float: left;
    		width: 100px;
    		height: 100px;
    		text-align: center;
    		overflow: hidden;
    	}
    	
    	.img_box li img {
    		width: 100%;
    		height: 100%;
    	}
    	
    	.img_box li i {}
    	
    	.img_show_box {
    		width: 100px;
    		position: relative;
    	}
    	
    	.img_delete {
    		/*position: absolute;
    		z-index: 3;
    		color: #F43838;
    		top:45px;
    		left: 50px;
    		width: 20px;
    		height: 20px;*/
    	}
    </style>