js如何展示上传的图片

前言：本文章主要讲的是上传的图片如何展示在页面上。

      一般来说，我们会先将本地图片上传到服务器，上传成功后，由后台返回图片的网络地址再在前端显示。但是，我今天讲的是不通过前面说的过程，而是直接使用js将上传的图片展示。

      这种方法就是通过FileReader的readAsDataURL方法，我们可以不经过后台，直接将本地图片显示在页面上。这样做可以减少前后端频繁的交互过程，减少服务器端无用的图片资源。让我们来看看代码：

　　原生js代码将图片转换成base64（监听input的节点）：

     

 var input = document.getElementById("file"); // 获取input节点

　　input.onchange = function() {
　　　　var file = this.files[0];
　　　　if (!!file) {
　　　　　　var reader = new FileReader(); // 图片文件转换为base64
　　　　　　reader.readAsDataURL(file);//用文件加载器加载文件
　　　　　　reader.onload = function() { // 显示图片
　　　　　　　　document.getElementById("file_img").src = this.result;//file_img是图片展示载体
　　　　　　}
　　　　}
　　}

 

　　vue代码将图片转换成base64（在input使用@change绑定）：

　　

　　

const file = this.$refs.upload.files[0];
　　const reader = new FileReader();
　　let _this = this;
　　reader.onload = function() {
　　　　_this.fileArr.push(reader.result);//fileArr是存储图片转换为base64的地址，然后可以通过v-for展示
　　};
　　reader.readAsDataURL(file);//用文件加载器加载文件

 

　　除了将图片转换成base64展示，还有另外一种方法：window.URL.createObjectURL(file)这种方法是把拿到图片的物理地址然后再展示。