vue实现图片上传的方法-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商，新人活动买多久送多久，划算不套路！

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比乳源网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式乳源网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖乳源地区。费用合理售后完善，10余年实体公司更值得信赖。

小编给大家分享一下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" :></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实现图片上传的方法-创新互联
分享路径：https://www.cdcxhl.com/article24/coscce.html

成都网站建设公司_创新互联，为您提供网站改版、网站建设、做网站、手机网站建设、定制开发、网站收录

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联