element Ui将图片转为base64的实例

虽然使用js就可以将图片转为base64,但为了省事,在使用element框架后还是尽量用element的上传功能做图片上传,因为element的上传功能封装的还是挺完善的,不用自己去思考判断各种场景条件,但e...

虽然使用js就可以将图片转为base64,但为了省事,在使用element框架后还是尽量用element的上传功能做图片上传,因为element的上传功能封装的还是挺完善的,不用自己去思考判断各种场景条件,但element好像并没有直接给出生成base64的方法(不确定),所依需要自己添加下代码。


element将图片转为base64的完整案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>element将图片转为base64流</title>
		<!-- 引入样式 -->
		<link href="http://www.duanlonglong.com/link/element.css" rel="stylesheet">
		<!-- 引入vue -->
		<script src="http://www.duanlonglong.com/link/vue.js"></script>
		<!-- 引入element组件库 -->
		<script src="http://www.duanlonglong.com/link/element.js"></script>
	</head>
	<body>
		<div id="app">
			<el-upload action='' :on-change="getFile" :limit="1" list-type="picture" :auto-upload="false">
				<el-button size="small" type="primary">选择图片上传,最多上传一张图片</el-button>
			</el-upload>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {

				},
				methods: {
					 getFile(file, fileList) {
						 // 得到element返回的图片文件流后调用下面函数转换base64流
					      this.getBase64(file.raw).then(res => {
					      console.log(res)//输出的为base64流
					      });
					    },
					getBase64(file) {
					      return new Promise(function(resolve, reject) {
					        let 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);
					        };
					      });
					    },
				}
			})
		</script>
	</body>
</html>


以上便是element Ui将图片转为base64的实例,并在此准备了图片转base64在线工具。

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. 王生 0 文章