图片上传知识点

日常项目开发中，图片上传是一个很常见的场景。但是现在各种UI框架都提供了自己的上传组件，网上的第三方上传组件也是数不胜数。或许你已经习惯了直接使用这些现成的组件，但还没有深入分析过它们的具体实现。本文将通过简单的代码为大家解析图片上传的各个知识点。自定义样式既然是上传，那肯定要用到标签。但是默认的输入标签样式不仅单一，而且在不同的浏览器中表现也不同，所以通常需要自定义输入的样式。但是标签对于样式修改不是很友好。解决方案有很多种，最常用的是隐藏标签，然后通过一个标签关联起来，然后直接修改标签的样式来实现。代码如下：点击上传图片验证上传前一般会对文件进行各种验证，比如文件类型、大小、格式、维度等。其中，可以通过设置标签的accept来指定文件类型。但是accept属性并没有完全禁止用户上传指定类型以外的文件。因此，可以检查和拦截上传文件的每个属性。在验证之前，我们需要通过change事件的事件对象获取上传文件：event.target.files可以获取上传文件列表。列表中的对象包含以下信息：{lastModified:1524153515000lastModifiedDate:ThuApr19201823:58:35GMT+0800(ChinaStandardTime){}name:"589adfbfe821c.jpg"size:1357444type:"image/jpeg"webkitRelativePath:""}从这个对象中，我们可以得到文件大小、文件类型、文件名等信息，以便我们在上传前验证这些信息，从而阻断非法文件。但是，从文件对象中，我们无法获取图像的大小信息。在我们的业务中，很多场景需要限制上传图片的大小为某个固定值，或者某个比例。以减少后面显示时的适配问题。为了验证上传图片的大小，我们需要使用FileReader和Image。FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件。Image()函数将创建一个新的HTMLImageElement实例。它在功能上等同于document.createElement('img')。这里，我们需要使用fileReader的readAsDataURL()方法读取上传的文件信息，通过onload处理事件获取读取的文件信息。如下：constreader=newFileReader();reader.readAsDataURL（文件）；reader.onload=e=>{console.log(e.target.result)}代码中file就是我们在file对象之前获取的文件列表files。e.target.result是读取文件的内容。然后通过newImage()函数创建一个新的HTMLImageElement实例，并将该实例的src赋值为fileReader来读取文件内容。可以得到文件的一个HTMLImageElement实例，通过它我们可以读取图片的尺寸信息。具体代码如下：constimage=newImage();image.src=e.target.result;image.onload=()=>{console.log(image.width,image.height);}图片上传前预览在图片上传展示的开发中，先上传文件，预览图片直接上传到服务器显示图片，但是这样不能达到上传前预览图片的目的，会导致上传很多垃圾图片。通过前人对获取图像尺寸的研究。相信你很快就能想到更优雅的图片预览方案。现在我们已经获得了文件的HTMLImageElement实例，我们可以直接将该实例附加到页面容器的Dom中。或者直接将获取的文件设置为已有图片标签的src属性。图片上传预览就是这么简单。图片上传及上传进度显示图片上传，我们可以直接使用form标签配合表单的submit()方法来上传图片。但是，这样我们无法在上传前对上传的文件进行验证和拦截。同时需要用户主动触发提交操作。为了让我们之前做的上传前拦截工作不至于白费，我们需要在合适的时间主动触发文件上传操作。这里需要使用FormData对象将输入的对象数据转换为表单数据。FormData对象用于将数据编译成键值对，以便可以使用XMLHttpRequest发送数据。它主要用于发送表单数据，但也可用于发送键控数据（keyeddata），独立于表单使用。如果表单的enctype属性设置为multipart/form-data，则将使用表单的submit()方法发送数据，使发送的数据具有相同的表单。首先我们创建一个formData对象，然后通过append()方法添加字段。如下：constformData=newFormData();formData.append("文件",文件);注意，虽然formData是一个对象，但是通过console.log无法打印出它的具体值，只能获取到FormData{}。接下来创建一个XMLHttpRequest对象来发送ajax请求。并且通过XMLHttpRequest对象的upload.onprogress方法可以实时获取上传信息，进一步获取上传进度。具体代码如下：constclient=newXMLHttpRequest()client.open("POST",uploadUrl)client.upload.onprogress=function(e){if(e.lengthComputable){lettotal=e.total;让loaded=e.loaded;让percentage=parseFloat(loaded/total).toFixed(2);}}client.send(formData)在上面的代码中，uploadUrl是上传URL。通过upload.onprogress事件对象可以获取上传文件的大小和当前进度的完整文件大小。通过这两个大小参数，可以很方便的计算出上传文件的比例，然后显示上传进度条或者显示进度数据，可以随意操作。拖拽上传除了传统的点击选择上传文件外，拖拽上传文件也是很常见的场景。使用拖拽上传，需要使用H5的拖拽方式drop和drag方式。除了这两个主要方法外，还有多种在拖放的不同阶段触发的方法。常用的拖拽方法如下：ondragstart事件：被拖拽元素开始被拖拽时触发的事件（目标是被拖拽的对象Dragelement）ondrag：该事件在元素拖拽过程中不断触发，类似于touchmove事件。(对象为被拖动元素)ondragend事件：拖动完成时触发的事件(对象为被拖动元素)ondraenter事件：被拖动元素进入目标元素时触发的事件(对象为目标元素)ondragoverevent:被拖动元素在目标元素上移动时触发的事件（对象为目标元素）ondragleave事件：被拖动元素在目标元素上移动时触发的事件（对象为目标元素）ondrop事件：dragged当元素在目标元素上同时松开鼠标时，触发的事件（动作对象为目标元素）类似于触摸事件的各个阶段。但是需要注意的是，每个拖动事件都有自己的action对象，action对象分为'dragableelement'和'targetelement'。draggedelement即被拖动的Dom元素，主要用于Dom在页面内拖动移动的场景。目标元素是接收被拖动元素的元素区域。当被拖动的元素进入该区域时，会触发目标对象的一系列事件。在图片拖拽上传的业务场景中，被拖拽的元素是页面外的图片文件，所以这里只使用目标元素的事件。我们可以通过这些事件来修改目标区域的样式等，其中两个核心事件是ondragover和ondrop事件。可能你觉得我只需要在鼠标松开的时候获取到被拖动的文件，那么我只需要使用ondrop事件就可以了？但是，由于浏览器的默认行为，不会触发ondrop事件。因此，您需要使用e.preventDefault();防止浏览器默认的ondropover事件，保证ondrop事件的触发。通过ondrop事件的事件对象，我们可以得到和event.target.files一样的文件列表，方法是event.dataTransfer.files；但是，当你这样写完之后，拖动之后，你会发现浏览器自动跳转到了图片的预览页面。这也是由于浏览器的默认行为，所以你还需要使用e.preventDefault();以防止浏览器的默认行为。这样就可以进行后续的文件验证操作了。具体实现代码如下：{e.preventDefault();}}onDrop={e=>{if(e.dataTransfer){e.preventDefault();constfile=e.dataTransfer.files[0];...}}}至此图片上传的常用知识点整理完毕，欢迎补充。