vue2项目封装el-upload组件图片上传及删除

原创已于 2024-03-23 20:32:26 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #android #ios

于 2023-10-13 10:43:12 首次发布

Vue2 专栏收录该内容

22 篇文章

订阅专栏

文章讲述了如何在Vue2的PC端项目中，针对大量图片上传需求，对ElementUI的Upload组件进行二次封装，包括图片格式和大小验证，以及使用FormData发送请求。

用到组件

vue2pc端项目一般搭配使用element组件，图片上传使用Upload组件，如果项目中有大量的图片上传功能，我们可以对Upload组件进行二次封装。

封装图片上传组件

<template>
	<div class="imgContent">
		<el-upload
			class="avatar-uploader
			action=""
			:show-file-list="false"
			:headers="headers"
			before-upload="beforeAvatarUpload
			:http-request="handleUpload"
			>
			<img v-if="value” :src="value” class="avatar" :style="{'width':width,'height':height}">
			<i v-else class="el-icon-plus avatar-uploader-icon" :style="{'width':width,'height':height,'line-height':lineHeight}"></i>
		</el-upload>
		<div v-if="value" class="delete" @click="delImg">
			<i class="el-icon-close"></i></div>
		</div>
</template>
<script>
import [ authuploadFileForCms ] from "@/api/common.js
import {getToken } from "@/utils/auth.js"
export default {
props:{
	 value:{
	  type:string
	  default:''
	},
	 delImg:{
	  type:Function
	  default:()=>{}
	},
	 width: {
      type: String,
      default: '148px'
    },
    height: {
      type: String,
      default: '148px'
    },
    lineHeight: {
      type: String,
      default: '148px'
    }
},
data(){
	return {
	headers:{
		Authorization:"Bearer" +  getToken(),//上传图片请求头携带token
	  }	
	}
  }
},
methods:{
//图片上传前校验
beforeAvatarUpload(file){
	const ispic = ['image/png','image/jpeg', 'image/gif', 'image/bmp', 'image/jpg'].includes(file.type)
	const isLt5M = filesize/1024/1024 < 5
	if(!ispic){
	 this.$message.error("请上传正确的图片格式)
	 return false
	}
	if(!isLt5M){
	  this.$message.error("上传图片大小不能超过5MB')
	  return false
	 }
//将文件读取为DatauRL,以data:开头的字符串
	//const reader = new FileReader();
	//reader.readAsDataURL(file);
	//reader .onload = e => {
	//this.editForm.productIcon = e.target.result
	//}
},
//图片上传,ios和andorid只支持FormData，不支持base64
async handleUpload(obj){
	let formData = new FormData();
	formData.append("file"，obj.file);
	formData.append("fileUploadType","RESOURCEBIT FILE");
	console.log(formData.get('file'))//此处打印需要加.get()
	let res = await authUploadFileForCms(formData);
	if(res.code==="0000"){
		this .$emit('input',res.data.fileInfo.fileUri)
	}else{
		this.$message.error("上传失败')
	}
<style scoped lang="scss">
.imgContent{
position:relative;
&:hover .delete{
	display:block;
}
.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;
  }
.delete{
	width: 20px;
	height: 20px;
	background-color: 
	red;color: #fff;
	border-radius: 50%;
	position: absolute;
	left: -10px;top: -10px;
	display: none;
	text-align: center;
	line-height: 20px;
	i{
		vertical-align: 
		middle;font-size: 14px;
		color: #fff;
	}
}
</style>

组件中调用上传图片组件

<template>
	<image-upload v-model="imgUrl" :delImg="delImg" width="100px" height="100px" line-height="100px"></image-upload>
</template>
<script>
	import ImageUpload from "../commonUI/imageUpload .vue"
export default {
components:{
	ImageUpload
 },
data(){
	return {
		imgUrl:''
    },
  methods:{
  	delImg(){
  	this.imgUrl=''
  	}
  }
}
</script>
<style>
 
</style>