vue 모 바 일 이미지 업로드 기능 구현

본 논문 의 사례 는 vue 가 모 바 일 이미지 업 로드 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

<template>
 <div class="box">
 <div class="upDiv">
  {{labTex}} //  
  //    
  <input ref="uploadInput"
    type="file"
    class='upinp'
    name="file"
    value=""
    accept="image/gif,image/jpeg,image/jpg,image/png"
    @change="selectImg($event)"/>
 </div>
 //         
 <div :class="operationShow?'operation-div':'operation-div hide'">
   <img class="shoImg" :src="imgDefault">
 </div>
 </div>
</template>
<script>
export default {
 props: {
  value:{
   type:String ,
   default:''
  },
  labTex:{
   type:String ,
   default:''
  },
  imgDefault:{
   type:String ,
   default:''
  }
 },
 data() {
  return {
   dataUrl: '',
   defaultImg:''
  }
 },
 mounted() {
  console.log(this.value)
  console.log(this.labTex)
 },
 // input change        event  
 methods: {
  selectImg(e){
   const imgFile = e.target.files[0];
   if (imgFile)
   { 
    this.operationShow=true
    if(this.checkFile(imgFile)){
     this.upload(imgFile);
    }
   }
  
  },
  checkFile(file){
   //      
   if (file === null || file === undefined) {
    alert("          ！");
    return false;
   }else{
    return true;
   }
   let size = Math.floor(file.size / 1024);
   //        
   if (size!=0) {
    return true;
   }else{
    return false
   }
  },
  upload(file){
    try {
    let self = this;
    var result='';
    //      
    var xhr = new XMLHttpRequest();
    xhr.open("post", ApiUrl+"/member/image/upload", true);
    xhr.onreadystatechange = function () {
     if (xhr.readyState == 4) {
      if (xhr.status == 200) {
       let returnData = $.parseJSON(xhr.responseText);
       if (!returnData) throw new Error("    SERVER");
       if (!returnData.code) throw new Error("    SERVER")
       if (returnData.code == 200) {
        alert("    ")
        //      
        self.$emit('change-img',returnData.name);
        self.defaultImg = returnData.url;
       } else {
        alert("    SERVER")
       }
       console.log(""+returnDate)
      } else {
       alert("    ")
      }
     };
    };
    var token = getMemberToken();
    //    
    var fd = new FormData();
    fd.append("token", token);
    fd.append("file", file);
    //    
    result = xhr.send(fd);
   } catch (e) {
    console.log(e);
    alert(e);
   }
  }
 }
}
</script>
<style>
.box {
 height: 11rem;
 margin-top: 0.5rem;
}
.upDiv{
 position:relative;
 height:1.2rem;
 width:100%;
 margin-bottom:0.08rem;
 width:5.5rem;
 text-align: center;
 z-index:10;
 font-size: 0.6rem;
 padding: 0 0.2rem;
 border-radius: 0.2rem;
 border-radius: 0.4rem;
 color: #fff;
 border: none;
 height: 1.2rem;
 line-height: 1.2rem;
 display: inline-block;
 background: #0097ffd9;
}
.operation-div{
 width: 15rem;
 height: 9.2rem;
}
.operation-div img{
 width:100%;
 height:100%;
}
.upDiv .upinp{
 position:absolute;
 left:0px;
 right:0px;
 right:0px;
 bottom:0px;
 z-index:1;
 opacity:0;
}
.shoImg{
 width:15rem;
 border-radius:0.05rem
}
</style>

페이지 에서 의 사용:

<upload-img 
  :lab-tex="`       `"
  :img-default="imgFourDefault"
  v-on:change-img="chooseFourImg"
></upload-img>

vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
더 많은 vue 학습 튜 토리 얼 은 주 제 를 읽 으 세 요《vue 실전 교정》.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.