axios获取图片显示_Vue.js+axios图片预览以及上传显示进度
在平時項目開發(fā)中，我們經(jīng)常會對文件做一些上傳操作，不僅僅要實現(xiàn)基本需求，也要兼顧用戶體驗，根據(jù)自己在工作中遇到的問題談談對圖片上傳的預覽以及上傳進度的優(yōu)化。
1.搭建項目
基于Vue.js+axios搭建的項目，新建一個Index.Vue項目如下，基本結(jié)構可以先可以選擇文件，預覽文件。
上傳圖片
選擇文件：
圖片預覽：
上傳文件到服務器
...
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綁定文件改變監(jiān)聽方法，打印事件參數(shù)如下：
發(fā)現(xiàn)剛才選擇的文件在Event>target>files下面
files是一個數(shù)組，剛才只選擇了一張圖片，所以長度為1，圖片的名稱(name)，大小(size)，類型(type)都有包含。
2.1.設置文件類型
在input標簽accept屬性設置文件類型，當用戶打開文件資源管理器選擇文件時，會過濾掉其他類型文件，能夠從源頭避免用戶選擇臟文件，也更加方便用戶選擇文件。
2.2.圖片預覽
要將用戶選擇的文件顯示到頁面上，以方便用戶下一步操作，因為用戶可能會從選擇的文件中再挑選幾張圖片操作，例如上傳到服務器。
圖片預覽要用到URL對象的URL.createObjectURL(file)方法生成一個blob地址，直接賦值給img標簽的src，頁面就可以展示。(URL.createObjectURL() 靜態(tài)方法會創(chuàng)建一個 DOMString，其中包含一個表示參數(shù)中給出的對象的URL。這個 URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。)
在methods添加handleFileChange方法，預覽圖片
...
// 文件改變監(jiān)聽事件
handleFileChange(evt){
console.log(evt);
let file=evt.target.files[0];
this.file=file;
let src=URL.createObjectURL(file);
this.imgPreViewSrc=src;
},
...
3.顯示上傳文件進度
選擇好文件之后，文件要上傳到服務器，有時候文件很大或者網(wǎng)速很慢的情況下，用戶需要知道已經(jīng)上傳進度，如果沒有上傳進度，用戶退出頁面那么文件就上傳失敗了。
3.1.修改script文件
引入axios,封裝上傳Promise函數(shù)
在methods里添加上傳方法uploadFile
import axios from 'axios';
// 文件上傳服務api
const baseURL='http://127.0.0.1/api';
function upload (params,cb=null) {
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.status===200){
resolve(res.data);
}else{
reject(res.data);
}
}).catch(err => {
reject(err);
});
});
}
...
// 上傳文件到服務器
uploadFile(){
let file=this.file;
if(file){
let formData = new FormData();
formData.append('file', file);
upload(formData,(progressEvent)=>{
console.log(progressEvent);
});
}else{
alert('請選擇文件')
}
...
3.2.上傳進度
在axios入?yún)⑿略鰋nUploadProgress方法，在文件上傳過程中該方法會調(diào)用，參數(shù)包含上傳的一些信息。
有關ProgressEvent的一些介紹:
ProgressEvent 是一個用來測量底層操作進度的接口，可以測量HTTP請求(例如：一個 XMLHttpRequest請求、或者一個底層資源如img，audio，video等,ProgressEvent常用屬性值：
ProgressEvent.lengthComputable:它是一個布爾值標識，表明總共需要完成的工作量和已經(jīng)完成的工作是否可以被底層所計算到。換而言之，它表示的就是過程是否是可以測量的。
ProgressEvent.loaded:是一個unsigned long long類型，表示底層進程已經(jīng)執(zhí)行的工作量。所做的工作比率可以用屬性和ProgressEvent.total計算。當使用HTTP下載資源時，這只表示內(nèi)容本身的一部分，而不是頭和其他開銷。
ProgressEvent.total:是unsigned long long類型，表示底層進程正在執(zhí)行的工作總量。當使用HTTP下載資源時，這只表示內(nèi)容本身，而不是頭和其他開銷。
點擊上傳按鈕，打開控制臺：
可以發(fā)現(xiàn)ProgressEvent中l(wèi)oaded屬性值為圖片文件上傳的大小，total為文件的大小。
3.3.在頁面添加進度條
為了組件通用化，新建一個Progress.vue組件,接受一個progressValue進度參數(shù)。
上傳進度：{{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 file=this.file;
if(file){
let formData = new FormData();
formData.append('file', file);
upload(formData,(progressEvent)=>{
this.isShowProgressBox=true;
this.progressValue=parseFloat((progressEvent.loaded/progressEvent.total*100).toFixed(2));
if(this.progressValue===100){
let timer=setTimeout(()=>{
this.isShowProgressBox=false;
clearTimeout(timer);
timer=null;
},500);
}
});
}else{
alert('請選擇文件');
}
...
可以看到，點擊上傳后，頁面出現(xiàn)進度模態(tài)框，讓用戶知道已經(jīng)上傳百分比，優(yōu)化用戶體驗。
關于圖片上傳其實還能優(yōu)化的方面還有很多，后續(xù)在工作中遇到問題再加以論述。
總結(jié)
以上是生活随笔為你收集整理的axios获取图片显示_Vue.js+axios图片预览以及上传显示进度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 三菱汽车怎么样 了解三菱汽车的性能和口碑
- 下一篇： html5倒计时秒杀怎么做,vue 设