el-upload 上传 base64 图片

el-upload 上传 base64 图片

​ ???

• el-upload 上传 base64 图片

  • ? 使用 el-upload 组件
  • ? 转换 base64 方法使用 Promise
  • ? 异步调用转换同步调用

• 代码区域

  • ? 页面组件

    <template> 	      <el-upload 						class="avatar-uploader" 						accept="JPG, .PNG, .JPEG,.jpg, .png, .jpeg"   // 可接收的文件格式 						list-type="picture"   // 图片显示样式 						:headers="headers"   // 图片上传时携带的token 						:action="url"   // 图片上传时地址 						:multiple="false"   // 是否支持多选 						:show-file-list="false"   // 是否展示文件列表 						:http-request="uploadImg"   // 自定义上传，会覆盖默认上传行为 					>             // 如果有图片则显示图片，没图片显示加号 						<img v-if="this.imgString" :src="this.imgString" class="avatar" /> 						<i v-else class="el-icon-plus avatar-uploader-icon" size="mini"></i> 				</el-upload>         // 建议分开写，否则图片数据不一定能拿到 				<el-button type="success" size="mini" @click="submitImg()">           	上传到服务器 				</el-button> </template> 

  • ? 页面数据

    <script>   export default{     data(){       return {         // 图片上传参数 				imgString: ''         // 图片上传头部信息（如果需要token就需要携带头部信息） 				headers: { 					Authorization: "Bearer" + getToken(), 				},         // 图片上传路径 				url: Cookies.get("configsapi") + "/upload",       }     },     methods: {     	// 转换base64方法时Promise对象，必须换成同步       // 网上还有其它办法，但是尝试过后，这个方法出错的概率最低 			async uploadImg(file) {         // 这里不一定是file.file，如果使用的方法不一样，有的是file.raw         // 这里传入的应该是组件中携带的文件信息 				let base64Str = await this.getBase64(file.file);         console.log(base64Str); 				this.imgString = base64Str.split(',');         console.log(this.imgString); 			}, 			// 获取图片转base64，这里用的是Promise，所以调用方法时必须转换成同步（async，await）       // 否则上传数据时好时坏，能不能上传成功全看运气 ^_^ 			getBase64(file) { 				return new Promise(function (resolve, reject) { 					const reader = new FileReader(); 					let imgResult = ''; 					reader.readAsDataURL(file) 					reader.onload = function () { 						imgResult = reader.result; 					} 					reader.onerror = function (error) { 						reject(error); 					} 					reader.onloadend = function () { 						resolve(imgResult); 					} 				}) 			},       // 上传图片到服务器 			submitImg() {         // 此处调用后台上传接口         …… 			},     }   } </script>