什么是网站集约化建设,沈阳妇科,公司做环评的网站,网站建设概念在平时项目开发中#xff0c;我们经常会对文件做一些上传操作#xff0c;不仅仅要实现基本需求#xff0c;也要兼顾用户体验#xff0c;根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化。1.搭建项目基于Vue.jsaxios搭建的项目#xff0c;新建一个Index…在平时项目开发中我们经常会对文件做一些上传操作不仅仅要实现基本需求也要兼顾用户体验根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化。1.搭建项目基于Vue.jsaxios搭建的项目新建一个Index.Vue项目如下基本结构可以先可以选择文件预览文件。上传图片选择文件图片预览 上传文件到服务器...data(){return{imgPreViewSrc:, //文件预览地址file:null, //上传文件}}methods:{}....text-center{text-align: center;}.wrapper{font-size: 16px;width: 60%;height: 100%;margin: 0 20%;border: 1px solid #ddd;img{width: 200px;}button{width:120px;height: 30px;margin-top: 30px;line-height: 30px;border: 1px solid #CCC;text-align: center;}}input的类型type设置为file,可以选择文件multipe属性设置为true一次可以选择多个文件。运行项目页面如下2.选择文件以及预览选择一个图片文件(bg.jpg),之前有在input绑定文件改变监听方法打印事件参数如下发现刚才选择的文件在Eventtargetfiles下面files是一个数组刚才只选择了一张图片所以长度为1图片的名称(name)大小(size)类型(type)都有包含。2.1.设置文件类型在input标签accept属性设置文件类型当用户打开文件资源管理器选择文件时会过滤掉其他类型文件能够从源头避免用户选择脏文件也更加方便用户选择文件。2.2.图片预览要将用户选择的文件显示到页面上以方便用户下一步操作因为用户可能会从选择的文件中再挑选几张图片操作例如上传到服务器。图片预览要用到URL对象的URL.createObjectURL(file)方法生成一个blob地址直接赋值给img标签的src页面就可以展示。(URL.createObjectURL() 静态方法会创建一个 DOMString其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。)在methods添加handleFileChange方法预览图片...// 文件改变监听事件handleFileChange(evt){console.log(evt);let fileevt.target.files[0];this.filefile;let srcURL.createObjectURL(file);this.imgPreViewSrcsrc;},...3.显示上传文件进度选择好文件之后文件要上传到服务器有时候文件很大或者网速很慢的情况下用户需要知道已经上传进度如果没有上传进度用户退出页面那么文件就上传失败了。3.1.修改script文件引入axios,封装上传Promise函数在methods里添加上传方法uploadFileimport axios from axios;// 文件上传服务apiconst baseURLhttp://127.0.0.1/api;function upload (params,cbnull) {return new Promise((resolve, reject) {axios.create({baseURL,})({url:/upload/uploadFile/image,method:post,data:params,// 上传进度onUploadProgress:function(progressEvent){if(progressEvent.lengthComputable cb){cb(progressEvent);}},}).then(res {console.log(res.data);if(res.status200){resolve(res.data);}else{reject(res.data);}}).catch(err {reject(err);});});}...// 上传文件到服务器uploadFile(){let filethis.file;if(file){let formData new FormData();formData.append(file, file);upload(formData,(progressEvent){console.log(progressEvent);});}else{alert(请选择文件)}...3.2.上传进度在axios入参新增onUploadProgress方法在文件上传过程中该方法会调用参数包含上传的一些信息。有关ProgressEvent的一些介绍:ProgressEvent 是一个用来测量底层操作进度的接口可以测量HTTP请求(例如一个 XMLHttpRequest请求、或者一个底层资源如imgaudiovideo等,ProgressEvent常用属性值ProgressEvent.lengthComputable:它是一个布尔值标识表明总共需要完成的工作量和已经完成的工作是否可以被底层所计算到。换而言之它表示的就是过程是否是可以测量的。ProgressEvent.loaded:是一个unsigned long long类型表示底层进程已经执行的工作量。所做的工作比率可以用属性和ProgressEvent.total计算。当使用HTTP下载资源时这只表示内容本身的一部分而不是头和其他开销。ProgressEvent.total:是unsigned long long类型表示底层进程正在执行的工作总量。当使用HTTP下载资源时这只表示内容本身而不是头和其他开销。点击上传按钮打开控制台可以发现ProgressEvent中loaded属性值为图片文件上传的大小total为文件的大小。3.3.在页面添加进度条为了组件通用化新建一个Progress.vue组件,接受一个progressValue进度参数。上传进度{{progressValue}}%上传成功!export default {props:[progressValue],name: Progress,};.progress-box{position: fixed;top:0;left:0;bottom: 0;right:0;background: rgba(0,0,0,0.5);.progress-content{position: absolute;top:50%;left:50%;width: 300px;height: 76px;padding: 8px 30px;transform: translate(-150px,-38px);background: #fff;border-radius: 8px;p{margin-bottom: 5px;}progress{width: 100%;height: 22px;}progress::-webkit-progress-bar{background-color:#d7d7d7;}progress::-webkit-progress-value{background-color:orange;}}}在div末尾添加Progress组件再修改Index.vue文件methods的上传方法...import Progress from ../components/Progress;...// 上传文件到服务器uploadFile(){let filethis.file;if(file){let formData new FormData();formData.append(file, file);upload(formData,(progressEvent){this.isShowProgressBoxtrue;this.progressValueparseFloat((progressEvent.loaded/progressEvent.total*100).toFixed(2));if(this.progressValue100){let timersetTimeout((){this.isShowProgressBoxfalse;clearTimeout(timer);timernull;},500);}});}else{alert(请选择文件);}...可以看到点击上传后页面出现进度模态框让用户知道已经上传百分比优化用户体验。关于图片上传其实还能优化的方面还有很多后续在工作中遇到问题再加以论述。
