創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商，新人活動買多久送多久，劃算不套路！

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比乳源網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式乳源網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋乳源地區(qū)。費(fèi)用合理售后完善，10余年實體公司更值得信賴。

小編給大家分享一下vue實現(xiàn)簡單圖片上傳的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討方法吧！

功能

• 實現(xiàn)圖片上傳
• 顯示進(jìn)度條
   

<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實現(xiàn)圖片上傳的方法-創(chuàng)新互聯(lián)
分享路徑：http://chinadenli.net/article24/coscce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站建設(shè)、做網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、定制開發(fā)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)