axios获取图片显示_Vue.js+axios图片预览以及上传显示进度

在平时项目开发中，我们经常会对文件做一些上传操作，不仅仅要实现基本需求，也要兼顾用户体验，根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化。

1.搭建项目

基于Vue.js+axios搭建的项目，新建一个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绑定文件改变监听方法，打印事件参数如下：