vue实现简单图片上传

Z时代
2024-01-10
分类：IT

本文实例为大家分享了vue实现简单图片上传的具体代码，供大家参考，具体内容如下

功能

实现图片上传

显示进度条


<template>
 <div class="about">
 <div>
 <div>
 <img :src="'https://www.xxx.com'+item" alt="" v-for="item in pics" >
 </div>
 <label><input type="file" ref="file" @change="up()">+<span class="label" :style="{width:pre+'%'}"></span></label>
 </div> 
 </div>
</template>
<style scoped="scoped">
 label{
 width: 100px;
 height: 100px;
 display: inline-block;
 overflow: hidden;
 background-color: #CCCCCC;
 color: #FFFFFF;
 font-size: 48px;
 text-align: center;
 line-height: 100px;
 position: relative;
 }
 input{display: none;}
 .label{
 position: absolute;
 display: inline-block;
 bottom: 0;
 left: 0;
 height: 2px;
 width: 0%;
 background-color: #FFA500; 
 }
</style>
<script>
 export default{
 name: 'About',
 data(){
 return{
 pics:[],
 pre:0,
 }
 },
 methods:{
 up(){
 var that=this;
 var file=this.$refs.file.files[0];
 var data=new FormData();
 data.append("file",file);
 this.$http.post("https://www.xxx.com/ajax/file.php",data,{
 onUploadProgress:e=>{
 this.pre=e.loaded/e.total*100
 console.log("+++",e)
 }
 })
 .then(res=>{
 if(res.data.error==0){
 this.pics.push(res.data.pic)
 console.log("----",res)
 }
 })
 .catch(err=>{
 console.log(err)
 })
 this.pre=0
 },
 }
 }
</script>