是一个图片上传的功能需求，当用户选择本地待上传的图片后隐藏上传组件并本地预览图片略缩图。这是个非常简单的功能且是前端使用频率很高的功能，ElementUI为了方便用户封装了一套文件上传的组件el-upload。可以帮助用户简单、快捷的实现文件上传功能，同时还提供了丰富的属性来实现对文件的各种操作。

HTML构建

这里我们利用ElementUI提供的组件el-upload来实现图片上传的功能，ElementUI封装了很多属性可以帮助我们快速的实现文件的上传，监听、校验和设限。这里我们不用el-upload的自动上传功能，所以我们利用属性:auto-upload="false"来禁止文件自动上传。属性on-change可以监听文件添加、上传时的状态改变，利用该属性触发自定义事件可以获取到需要的文件属性。

CSS样式设计

图片上传的样式根据设计需求来就可以了，我这里利用flex定义简单的样式。图片预览我们直接借用el-upload标签属性，设置其背景图片为我们上传的图片即可。

获取图片URL地址

on-change属性在文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用，利用on-change属性绑定自定义触发事件来生成可用于本地预览的URL地址。e.raw为图片的实体对象，利用window.createObjectURL(e.raw)来创建图片地址。

阻止自动上传并获取图片

在el-upload中定义属性:auto-upload="false" 可以禁止文件自动上传，上传禁用之后无法通过上传之后的效果显示。此时before-upload、on-progress、on-success、on-error、on-preview、on-remove等钩子函数就无法获取到文件信息了，所以想获取到文件的还需要通过on-change属性来实现。既然禁止了自动上传那么我们就需要拿到文件对象，我们需要在data中创建一个 FormData 对象来接收文件数据（有文件的form表单上传数据要用formData类型）。

手动上传图片

获取到文件数据之后我们就可以开始手动上传文件，如果还需要附上表单数据我们可以通过append继续向formData中添加数据。formData可以将form表单元素的name与value进行组合，实现表单数据的序列化从而减少表单元素的拼接，提高工作效率。

总结：

在form表单中如果要上传文件，一定要将headers参数 Content-Type=”multipart/form-data”设置封装数据类型。把数据分成一个一个小段，再利用ajax的send()方法将数据发送至后台。以上内容是小编给大家分享的【Vue实战082：el-upload组件实现图片上传及预览】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：将headers设置成'Content-Type':'multipart/form-data'类型。

们或多或少都使用过各式各样的富文本编辑器，其中有一个很方便功能，复制一张图片然后粘贴进文本框，这张图片就被上传了，那么这个方便的功能是如何实现的呢？

原理分析：

复制=>粘贴=>上传

在这个操作过程中，我们需要做的就是：监听粘贴事件=>获取剪贴板里的内容=>发请求上传

需要明白的是：

我们只能上传截图工具截的图片(qq截图、微信截图等)，不能粘贴上传系统里的图片(从桌面上、硬盘里复制)，因为他们是存在完全不同的地方。

知悉paste event这个事件：当进行粘贴（右键paste/ctrl+v）操作时，该动作将触发名为'paste'的剪贴板事件，这个事件的触发是在剪贴板里的数据插入到目标元素之前。如果目标元素（光标所在位置）是可编辑的元素（设置了contenteditable属性的div。textarea并不行），粘贴动作将把剪贴板里的数据，以最合适的格式，插入到目标元素里；如果目标元素不可编辑，则不会插入数据，但依然触发paste event。数据在粘贴的过程中是只读的。

监听了paste事件，也知道了表现形式，接下来就是如何获取数据了：

chrome有特定的方法，利用clipboardData.items、getAsFile()、new FileReader()等api可以在paste回调函数里获取到剪贴板里图片的base64编码字符串（无论是截图粘贴的还是网页图片复制粘贴的），ie11，firefox没有这样的api，不过依然有办法可以获取，因为数据已经表现在img的src里了，对于截图粘贴的，直接取img的src属性值（base64），对于网页粘贴的，则把地址传给后台，然后根据地址down下来，存在自己的服务器，最后把新地址返回来交给前端展示就ok了。为了保持一致性便于管理，统一将所有情况（截图、网页）中的img的src属性替换为自己存储的地址。

完整例子：

function fChange() { 
 let file = document.getElementById('file'); 
 // 输出已经选择图片名字 
 console.log(file.value); 
 // 输出已经选择的图片对象 
 console.log(file.files[0]); 
} 
... 
<input type="file" id="file" onchange="fChange()">

// file 转 blob对象 
let bold = window.URL.createObjectURL(file.files[0]); 
console.log('bold==>'+bold); 
 
let boldImg = document.getElementById('bold'); 
boldImg.src = bold; 
 
// file 转 base64 
let base64Img = document.getElementById('base64'); 
var reader = new FileReader(); 
reader.readAsDataURL(file.files[0]); 
reader.onload = function (e) { 
 console.log('base64==>'+this.result); 
 base64Img.src = this.result; 
}

<div id="img-pre"> 
</div> 
<div id="add-pic"> 
 <input type="file" id="up-file" onchange="fChange()"> 
</div>

#add-pic{ 
 width: 100px; 
 height: 100px; 
 background: url('./add-pic.png') 
} 
#add-pic input{ 
 width: 100%; 
 height: 100%; 
 display: none; 
} 
#img-pre:after{ 
 display: block; 
 content: ''; 
 clear: both; 
} 
#img-pre img{ 
 float: left; 
 width: 100px; 
 height: 100px; 
 margin-right: 10px; 
}

let addPic = document.getElementById('add-pic'), upFile = document.getElementById('up-file'); 
// 监听图片点击，从而触发input file的点击事件 
addPic.addEventListener('click', function(){ 
 upFile.click(); 
}) 
function fChange() { 
 let file = document.getElementById('up-file'); 
 let imgPre = document.getElementById('img-pre'); 
 
 // file 转 blob对象 
 let bold = window.URL.createObjectURL(file.files[0]); 
 
 // 创建img元素，并添加到img-pre元素里 
 var img = document.createElement("img"); 
 img.setAttribute("src", bold); 
 imgPre.appendChild(img); 
}