vue 그림 업로드 구성 요소 사용 설명

vue 사진 업로드 구성 요소,참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
최근 에 프로젝트 를 할 때 회사 프로젝트 의 공공 구성 요소 라 이브 러 리 를 보충 하 는 김 에 하 던 일이 일 단락 되 자마자 필 기 를 하 러 왔 습 니 다.
일단 최종 효 과 를 보도 록 하 겠 습 니 다.
1.삭제 불가
 

2.삭제 허용(삭제 버튼 표시)

실현 효 과 는 바로 위의 그림 에 내용 을 표시 하 는 것 이다.
다음은 구성 요소 레이아웃 부분 에 코드 가 바로 올 라 갑 니 다.

<template>
 <div class="uploadImg">
 <div class="upload-content">
  <div class="upload-title">
  <p>{{upTitle}}</p>
  <p class="show-num">{{upNum}}/{{uploadNum}}</p>
  </div>
  <ul class="img-list">
  <li class="show-img" v-for="(item, index) in imgList" :key="index">
   <img :src="item" alt="">
   <kk-icon :class="isDel == true ? '' : 'hide-del'" name="error" color="#FF685D" size="0.4rem" @click.native="delImg(index)"></kk-icon>
  </li>
  <div class="uploadSec">
   <img :src="globalPath+'img/insurance/upload.png'" alt="    ">
   <input type="file" value="" id="choose" @change='onUpload' multiple>
  </div>
  </ul>
 </div>
 </div>
</template>

위 코드 에 있 는 kk-icon 은 사용자 정의 아이콘 구성 요소 입 니 다.색상 과 크기 를 받 아들 이 는 기능 이 하나 더 있 을 뿐 입 니 다.바 꾸 기 를 쓰 면 됩 니 다.그리고 클 라 스 를 동적 으로 정의 하면 현 은 이 끝 납 니 다.
즉석에서 양식 을 붙이다

<style lang="less" type="text/less" rel="stylesheet/less">
 .uploadImg{
 text-align: left;
 .upload-content{
  margin-left: 0.3rem;
  .upload-title{
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0.3rem 0.3rem 0;
  .show-num{
   color: #c9c9c9;
  }
  }
  .img-list{
  display: inline-block;
  margin: 0.6rem 0.3rem 0.3rem 0;
  .show-img{
   position: relative;
   display: inline-block;
   margin-right: 0.12rem;
   height: 1.3rem;
   width: 1.3rem;
   img{
   width: 100%;
   height: 100%;
   }
   .hide-del{
   display: none;
   }
   .yd-icon-error{
   position: absolute;
   top: 0;
   right: 0;
   }
  }
  .uploadSec{
   position: relative;
   display: inline-block;
   width: 1.3rem;
   height: 1.3rem;
   overflow: hidden;
   img{
   width: 100%;
   height: 100%;
   }
   #choose{
   position: absolute;
   height: 100%;
   left: 0;
   top: 0;
   opacity: 0;
   }
  }
  }
 }
 }
</style>

다음은 논 리 를 실현 하 는 것 을 보 겠 습 니 다.
input type="file"을 통 해 그림 선택 을 실현 합 니 다.그림 을 더 선택 할 수 있 는 지 여 부 는 input 에 주 는 multiple 속성 입 니 다.(기타
구성 요소 에서 부모 구성 요소 가 보 내 는 그림 의 수량 제한 을 받 습 니 다.삭제 작업 을 시작 할 지,그림 주소 업로드,미리 보기 주소 등 을 시작 할 지 여부 입 니 다.
props: ['imgNum','title','upUrl','showUrl','showDel'],
title 구성 요소 의 제목 업로드
imgNum 업로드 수량 제한
upUrl 설정 업로드 이미지 주소
showUrl 그림 재생 주소 설정
showDel 그림 삭제 허용 여부
changeNum 그림 이 바 뀌 었 을 때 부모 구성 요소 의 방법 을 터치 합 니 다.
그림 을 선택 하면 change 가 실 행 됩 니 다.그래서 저 는@change="onUpload"에 업로드 하고 업로드 할 때 formData 를 사 용 했 습 니 다.

//     
onUpload (e) {
 let photoFile = e.target
 let val = e.target.value
 //           
 if (photoFile.files.length === 0) return false
 for (let i = 0; i < photoFile.files.length; i++) {
 this.fileAdd(photoFile.files[i],i)
 }
}

업로드 작업 중 그림 추가 처리 방법 fileAdd
배경 에서 요구 하 는 그림 주 소 는 문자열 이기 때문에 저 는 아래 에서 join()을 사용 하여 배열 전환 처 리 를 합 니 다.

//     
fileAdd (file,index) {
 let csrf_token = this.getCookie('XSRF-TOKEN');
 let formFile = new FormData();
 let imgName = 'img0';
 formFile.append(imgName, file);
 formFile.append("_token", csrf_token);
 let name = file.name
 let size = file.size
 let types = '.jpg,.jpeg,.png,.gif' //    
 let fileExt = name.substring(name.lastIndexOf('.')).toLowerCase()
 let result = types.indexOf(fileExt)
 if (result < 0) {  //      
 this.$dialog.toast({
  mes: '       ',
  timeout: 1000
 })
 return false
 }
 if (size > 1 * 1024 * 1024) {
 this.$dialog.toast({
  mes: '        1M',
  timeout: 1000
 })
 return false
 }
 if (this.fileList.length >= this.uploadNum) {
 this.$dialog.toast({
  mes: '        ' + this.uploadNum + ' ',
  timeout: 1000
 })
 return false
 }

 axios.post(this.upUrl,formFile)
 .then((res) => {
  this.upNum = this.fileList.length + 1; //      
  this.fileList.push(file);    //       
  let imgUrl = this.showUrl + res.data.data; //      
  let upImg = res.data.data;    //         
  this.imgList.push(imgUrl);
  this.upImgList.push(upImg);
  let upImgAll = this.upImgList.join(',');
  this.$emit('input', upImgAll);
 }).catch((err) => {
  console.log(err);
 })
},

그림 삭제 작업
이 삭 제 는 마지막 으로 제출 한 그림 배열 을 처리 하 는 것 일 뿐 이미지 서버 에 올 린 그림 을 제거 하지 않 았 습 니 다.

//     
delImg (index) {
 this.imgList.splice(index, 1);
 this.fileList.splice(index, 1);
 this.upNum = this.imgList.length;
 let imgAll = this.imgList.join(',');
 this.$emit('input', imgAll);
},

마지막 으로 나 는 구성 요소 에서 그림 의 변 화 를 감청 했다.

watch: {
 imgList () {
  this.$emit('changeNum'); //                 
 }
 },

바로 이 겁 니 다.간단 한 업로드 구성 요소(잘 쓰 지 못 했 습 니 다.가볍게 뿌 립 니 다),그리고 최적화 할 수 있 는 부분 이 있 습 니 다.나중에 고치 고 보 세 요.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.