Vue 모 바 일 에서 이미지 업로드 및 1M 이상 압축 업로드 실현

본 논문 의 사례 는 Vue 모 바 일 에서 이미지 업로드 와 1M 이상 의 압축 업 로드 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.실현 효과

2.코드
Html：

<div class="choosePic">
  <div class="pics" :style="{backgroundImage: 'url(' + form.erpRecords + ')'}">
   <input type="file" class="uploads" @change="uploadserpRecords" accept="image/*" multiple >
   <img src="../../assets/home/[email protected]" alt="" v-if="form.erpRecords == ''">
   <div v-if="form.erpRecords == ''">    </div>
  </div>
</div>

Css:less 를 사 용 했 습 니 다.less 를 도입 해 야 사용 할 수 있 습 니 다(npm install less less-loader--save)

.choosePic{
  margin: 0.64rem 0;
  .pics{
  background-position: center;
  background-size: cover;
  width: 15.1467rem;
  height: 5.5467rem;
  background-color: #F9F9F9;
  border: 2px solid #C3C3C3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: #3DCA9A;
  font-weight: bold;
  border-radius: 0.213rem;
  >div{
   margin-left: 0.213rem;
   letter-spacing: 2px
  }
  .uploads{
   position: absolute;
   z-index: 99;
   left: 0;
   width: 99%;
   height: 5.5467rem;
   opacity: 0;
  }
  img{
   width: 1.4933rem;
   height: 1.4933rem;
  }

  }
 }

JS：

/**
 *       
 */
uploadserpRecords (e) {
 let file = e.target.files[0]
 if (file === undefined) {
 return
 }
 if (file.size / 1024 > 1025) { //     1M（      ），      
 that.photoCompress(file, { //         
  quality: 0.2
 }, function (base64Codes) {
  // console.log("   ：" + base.length / 1024 + " " + base);
  let bl = that.base64UrlToBlob(base64Codes)
  // file.append('file', bl, 'file_' + Date.parse(new Date()) + '.jpg') //     
  that.uploadLice(bl) //         
 })
 } else { //     1M     
 this.uploadLice(file)
 }
}, 
/**
 * base64   Blob     file  
 */
base64UrlToBlob (urlData) {
 let arr = urlData.split(','),
 mime = arr[0].match(/:(.*?);/)[1], //   url  ，    byte
 bstr = atob(arr[1]), //     , ascii   0      0
 n = bstr.length,
 u8arr = new Uint8Array(n)
 while (n--) {
 u8arr[n] = bstr.charCodeAt(n)
 }
 //  blob
 // return new Blob([u8arr], {type: mime})
 let filename = Date.parse(new Date()) + '.jpg'
 //  file
 return new File([u8arr], filename, {type: mime})
},
 /*
     
 file：  (       )，
 obj：       width， height， quality(0-1)
 callback：        
*/
photoCompress (file, obj, callback) {
 let that = this
 let ready = new FileReader()
 /*       File      .        ,    URL      . */
 ready.readAsDataURL(file)
 ready.onload = function () {
 let re = this.result
 that.canvasDataURL(re, obj, callback) //     
 }
},
/*   canvas          */
/*    base64 */
canvasDataURL (path, obj, callback) {
 let img = new Image()
 img.src = path
 img.onload = function () {
 let that = this //   img
 //        
 let w = that.width,
  h = that.height,
  scale = w / h
 w = obj.width || w
 h = obj.height || (w / scale)
 let quality = 0.2 //        0.7
 //   canvas
 let canvas = document.createElement('canvas')
 let ctx = canvas.getContext('2d')
 //       
 let anw = document.createAttribute('width')
 anw.nodeValue = w
 let anh = document.createAttribute('height')
 anh.nodeValue = h
 canvas.setAttributeNode(anw)
 canvas.setAttributeNode(anh)
 ctx.drawImage(that, 0, 0, w, h)
 //     
 if (obj.quality && obj.quality >= 1 && obj.quality < 0) {
  quality = obj.quality
 }
 // quality   ，          
 let base64 = canvas.toDataURL('image/jpeg', quality)
 //       base64  
 callback(base64)
 }
},
//   file  ，        
uploadLice (file) {
 console.log(file)
 uploadLog(file, (data) => {
 this.form.operatingLicense = data
 console.log(data)
 })
},

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