前端实现图片上传预览并转换base64

  前端实现文件的上传,就必须用到input标签,type属性为file
  在vue项目中通ref操作dom。input有一个属性accept,是必须要搭配type=file使用。
  multiple可以上传多张,accept限制上传文件的类型,属性值有
  • audio(音频)
  • video(视频)
  • image(图片)
  • MIME_type(一个有效的 MIME 类型,不带参数。请参阅 IANA MIME 类型,获得标准 MIME 类型的完整列表。image/*表示接受所有类型的图片,音频,视频相同。
 <input type="file" accept="image/*" ref="file" @change="upload"  multiple/>

  监听inputonchange事件,在change事件里操作DOM,拿到上传的文件信息。上传的文件信息都会保存在files以数组元素的形式保存。

 this.$refs.file.files[0]

  通过new fileReader对象将图片转换为base64的数据,FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容,

 let data = this.$refs.file.files[0];
let imgFile = new FileReader();
imgFile.readAsDataURL(data);
imgFile.onload = res => {
console.log(res);
this.src=res.target.result
};

  

  readAsDataURL,读取指定的文件内容,一旦完成,就可以在onload事件拿到base64数据。
  onload事件有一个参数,这个参数包含了读取完成之后的文件信息,其中,res.target.result就是转换之后的base64图片数据。将base64数据赋值给src即可预览图片。

  前端实现图片上传预览并转换base64

上一篇:基于Spark的电影推荐系统(实战简介)


下一篇:【nodejs】关于 alert 和 document