element-plus的el-upload上传图片

上传一张图片后隐藏上传按钮，添加删除和预览，然后把图片变成base64，在整个form进行提交的时候，先把图片进行上传，在进行提交，以及修改的时候进行回显

首先是html

<el-form-item label="照片" prop="driverPhoto">
							 <el-upload
							class="avatar-uploader"
							action=""
							:on-change="getFilesj" //监听
							:on-remove="handlePicRemovesj" //删除
							:on-preview="handlePicPreviewsj" //预览
							v-model="form.driverPhoto" //绑定的数据
							:limit="1" //限一张图
							list-type="picture-card" //文件类型
							:file-list="filelistsj" //回显
							:auto-upload="false" //是否自动上传
							accept="image/png, image/gif, image/jpg, image/jpeg"
						>
						<!-- 图标 -->
							<el-icon
								style="font-size: 25px;"
								><Plus /></el-icon>

						</el-upload>
						<el-dialog
							v-model="dialogVisiblesj"
							title="预览"
							destroy-on-close
						>
							<img
								:src="dialogImageUrsj"
								style="
									display: block;
									max-width: 500px;
									margin: 0 auto;
									height: 500px;
								"
							/>
						</el-dialog>
						</el-form-item>

base64的方法

uploadImgToBase64(file) {
				// 核心方法，将图片转成base64字符串形式
				return new Promise((resolve, reject) => {
					const reader = new FileReader();
					reader.readAsDataURL(file);
					reader.onload = function () {
					// 图片转base64完成后返回reader对象
					resolve(reader);
					};
					reader.onerror = reject;
				});
		},

按钮添加图片之后的变化，注释的是一个图片接口的验证，如果是身份证这些可以先转为base64来验证，我这个是没次数了，就注释掉了

	getFilesj(file, fileList) {
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (isLt2M) {
				// uploadImgToBase64()返回一个Promise对象，通过.then()获取其数据。其中data.result是图片转成的base64值
				this.uploadImgToBase64(file.raw).then(async(data) => {
					this.form.driverPhoto= data.result;//把图片转为base64
					this.listst= data.result; //下方做判断用的

					// console.log("data.result",data.result);
					// var list={
					// 			url:this.form.idCardBack,
					// 			type:2
					// 		}
					// 		console.log("list--1",list);
					// 		var test= 接口
					// 		if(test.ret == 200){
					// 				this.$message.success("识别成功")
					// 				window.localStorage.setItem('userImg',this.form.idCardBack)
					// 				this.form.idCardValidity = test.data.end_date

					// 				console.log("yy.data.address--1",test.data.address);

					// 			}else{
					// 				this.$message.error("身份证识别错误")
					// 			}
					// 		console.log("test",test);
							// this.form.idCardBack= file.url;
							// console.log("file-curl-1",this.form.idCardBack);
				});
			} else {
				this.$message.error("上传图片大小不能超过 2MB!");
			}
			console.log(" fileList-111",fileList);
			console.log(" file-111",file);

			},

剩下就是简单的 删除和预览，

             //删除
			    handlePicRemovesj(file, fileList) {
					this.hideUploadEdit = fileList.length >= 1;
					this.form.driverPhoto = "";
				},
			//预览
			handlePicPreviewsj(file) {
				console.log("file", file.url);
				this.dialogImageUrsj = file.url;
				this.dialogVisiblesj = true;
			},

当然来在data里面也有写上值

                dialogVisiblesj: false, 
				dialogImageUrsj: "",
				filelistsj:[],
				listst:"",
                form: {
					driverPhoto:"",
				},

现在基本已经好了，但是他现在的页面是这样的

但是我要的是这样的

 

然后研究了一下，就是很简单的用了一个css里面的宽高和 overflow: hidden

.avatar-uploader {
  width: 150px;
  height: 150px !important;
  overflow: hidden;
}

现在是页面已经好了，之后就是提交form表单之前先把我们base64的图片上传，然后返回的值赋予form里面的图片，同样进行判断表单在修改或者添加时候图片有没有更改,有的话走图片接口之后走修改或者添加的接口,如果图片没有进行修改或者添加,就直接走修改或者添加的接口

//表单提交方法
			submit(){

						if(this.listst !=''){
							var listst = {
							base64Str: this.listst}

						   var testst =  listst.base64Str===''?'':接口;//进行判断

						   if (testst.code === 200 ){
								var res
								this.form.driverPhoto = testst.data
								//添加接口
								if(this.mode === 'add'){
									res = '接口'
                                  //修改
								}else if(this.mode === 'edit'){
									res = '接口'
								}
								this.isSaveing = false;
								if(res.code == 200){
								this.$emit('success', this.form, this.mode)
								this.visible = false;
								this.$message.success("操作成功")
								this.reload()

								}else{
								this.$alert(res.message, "提示", {type: 'error'})
								}
						   }
}

之后就是回显的问题了,在表单注入的时候把后台返的图片放到:file-list这个钩子里就好了

同时判断一下后台图片有没有数据，有的话回显，没有的话不回显

//表单注入数据
			async setData(data){
				Object.assign(this.form, data)

				data.driverPhoto ===''?'':
				this.filelistsj.push({
					url: data.driverPhoto,
				});
			 }

同样这个也是用的scui的后台管理系统框架