vue实现简单图片上传

编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了vue实现简单图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

关于vue.js组件的教程,请大家点击专题进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板