页面体验优化-图片预览和上传显示进度

.text-center{text-align:center;}.wrapper{font-size:16px;宽度：60%；高度：100%；保证金：020%；边框：1px实心#ddd；img{宽度：200px;}按钮{宽度：120px;高度：30px；:30px;边框：1px实心#CCC；文本对齐：分呃；}}在平时的项目开发中，我们经常会对文件做一些上传操作，既要满足基本需求，又要兼顾用户体验。问题是说说图片上传的预览和上传进度的优化。1.构建项目在Vue.js+axios构建的项目基础上，新建一个Index.Vue项目，如下。可以选择和预览基本结构。.text-center{text-align:center;}.wrapper{font-size:16px;宽度：60%；高度：100%；保证金：020%；边框：1px实心#ddd；img{宽度：200px;}按钮{宽度：120px;高度：30px；:30px;边框：1px实心#CCC；文本对齐：分呃；}}输入类型设置为文件，可以选择一个文件，multipe属性设置为true，可以选择多个文件一次运行项目，页面如下：2.选择一个文件并预览选择一个图片文件（bg.jpg），在输入绑定文件中更改监听方式之前，打印事件参数如下：在Event>target>files下发现刚才选择的文件是一个数组，而刚才只选择了一张图片，所以长度为1，包括图片的名称（name）、尺寸（size）、类型（type）。2.1.设置文件类型在input标签的accept属性中设置文件类型。当用户打开文件资源管理器选择文件时，会过滤掉其他类型的文件，可以防止用户从源头选择脏文件，让用户选择文件更加方便。2.2。图片预览将用户选中的文件显示在页面上，使用方便用户进行下一步操作，因为用户可能会从选中的文件中多选几张图片进行操作，比如上传到服务器.图片预览需要使用URL对象的URL.createObjectURL(file)方法生成一个blob地址，直接赋值给img标签的src，页面即可显示。_(URL.createObjectURL()静态方法将创建一个DOMString，其中包含表示参数中给定对象的URL。此URL的生命周期绑定到创建它的窗口中的文档。这个新的URL对象表示指定的AFile对象或Blob对象。)_methods中添加handleFileChange方法，预览图片...//文件变化监听事件handleFileChange(evt){console.log(evt);让文件=evt.target.files[0];this.file=文件；让src=URL.createObjectURL(文件);this.imgPreViewSrc=src;},...预览如下：3.显示上传文件的进度选择文件后，需要将文件上传到服务器。有时候文件很大或者网速很慢的情况下，用户需要知道上传进度。如果没有上传进度，用户退出页面，则文件上传失败。3.1.修改脚本文件导入axios，封装上传Promise功能，添加上传方法uploadFile3.2.上传进度调用，参数包含一些上传的信息。关于ProgressEvent的一些介绍：ProgressEvent是一个用来衡量底层操作进度的接口，可以衡量HTTP请求（例如：XMLHttpRequest请求，或者img、audio、video等底层资源，ProgressEvent常用属性值：ProgressEvent.lengthComputable:布尔型标识，表示底层是否可以计算待完成的工作量和完成的工作量，换句话说，表示流程是否可测量。ProgressEvent.loaded：是unsignedlonglong类型，表示底层进程完成的工作量，完成工作的比例可以通过property和ProgressEvent.total来计算，在使用HTTP下载资源时，这只代表部分内容本身。ProgressEvent.total不是标头和其他开销，而是unsignedlonglong类型，表示底层进程正在执行的工作总量。当使用HTTP下载资源时，这仅代表内容本身，而不代表标头和其他开销。点击上传按钮，打开控制台：可以发现ProgressEvent中的loaded属性值为上传图片文件的大小，total为文件大小。3.3.向页面添加进度条为了使组件通用，创建一个新的Progress.vue组件并接受一个progressValue进度参数。.progress-box{position:fixed;顶部：0；左：0；底部：0；右：0；背景：rgba（0,0,0,0.5）；.progress-content{位置：绝对；顶部：50%；左：50%；宽度：300px；高度：76px；填充：8px30px；变换：平移（-150px，-38px）；背景：#fff；边界半径：8px；p{底边距：5px;}进度{宽度：100%；高度：22px；}progress::-webkit-progress-bar{背景颜色：#d7d7d7;}progress::-webkit-progress-value{背景颜色：橙色；}}}在div末尾添加Progress组件，然后修改Index.vue文件方法的上传方法：然后上传图片，如下：可以看到，点击上传完成后，页面会出现一个进度模态框，让用户知道上传的百分比，优化用户体验。图片上传还有很多方面可以优化，以后工作中遇到问题再讨论。