vue里将图片转为base64流编码

vue一般都是配合框架使用,如element,iview等,但此处只说纯vue怎么将图片转为base64流,其实在vue里图片转base64流与js将图片转为base64没什么区别,只是改变一些语法,把js的事件,定义变量等...

vue一般都是配合框架使用,如element,iview等,但此处只说纯vue怎么将图片转为base64流,其实在vue里图片转base64流与js将图片转为base64没什么区别,只是改变一些语法,把js的事件,定义变量等根据vue的语法写出来而已,下面直接上实例。


实例代码:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>vue中JS将图片转base64案例</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
	</head>
	<body>
		<style type="text/css">
			.a-upload {
			    padding: 4px 10px;
			    height: 20px;
			    line-height: 20px;
			    position: relative;
			    cursor: pointer;
			    color: #888;
			    background: #fafafa;
			    border: 1px solid #ddd;
			    border-radius: 4px;
			    overflow: hidden;
			    display: inline-block;
			    *display: inline;
			    *zoom: 1
			}
			
			.a-upload  input {
			    position: absolute;
			    font-size: 100px;
			    right: 0;
			    top: 0;
			    opacity: 0;
			    filter: alpha(opacity=0);
			    cursor: pointer
			}
			
			.a-upload:hover {
			    color: #444;
			    background: #eee;
			    border-color: #ccc;
			    text-decoration: none
			}
		</style>
		<div class="upload-img">
			<div id="app">
				<input type="file" class="a-upload" name="upload" @change="uploadImg($event, 1)" id="upload">
				<img :src="showurl" >
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					showurl: ''
				},
				methods: {
					uploadImg(e) {
						if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
							alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种!')
							return false
						}
						const file = e.target.files[0]
						var reader = new FileReader()
						// 转化为base64
						reader.readAsDataURL(file)
						reader.addEventListener("load", () => {
							this.showurl = reader.result
							console.log('这是base64流',reader.result)
						}, false);

					}
				}
			})
		</script>
	</body>

</html>


以上便是vue将图片转为base64流的完整案例,如果报错,可能由于引入的vue链接不通,请自行更换链接,并在此准备了图片转base64在线工具。

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

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