使用Vue2怎么實(shí)現(xiàn)一個(gè)圖片上傳、壓縮、拖拽排序等功能

使用Vue2怎么實(shí)現(xiàn)一個(gè)圖片上傳、壓縮、拖拽排序等功能？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

圖片上傳

圖片上傳用的是HTML的input標(biāo)簽實(shí)現(xiàn)的。核心就是把獲取到的文件通過FileReader轉(zhuǎn)換成圖片，代碼如下：

<input type="file" accept="image/*" capture="camera" @change="selectFile">

selectFile(event:any){
 	this.showAlert = false  
 	if (event.target.files && event.target.files.length > 0) {
   this.isLoading = true
   let file:any = event.target.files[0]
   let fr:any = new FileReader()
   fr.readAsDataURL(file)
   fr.onload = (imgObj:any) => {
    let img:any = new Image()
    img.src = imgObj.target.result
    img.onload = (e:any) => {
     // 這里就可以獲取到上傳的圖片了
     })
    }
   }
  }
}

圖片壓縮

圖片壓縮用的是canvas重繪的方法實(shí)現(xiàn)的，具體代碼如下：

// 省略上面的代碼
fr.onload = (imgObj:any) => {
	// 獲取到圖片文件后
 let img:any = new Image()
 img.src = imgObj.target.result
 img.onload = (e:any) => {
  Compress(img,e.path[0].height,e.path[0].width,(newImg:any) => {
   this.imgList.push(newImg)
   this.isLoading = false
   // 待添加拖拽功能
  })
 }
}

/**
 * 圖片壓縮
 * @param img 圖片對(duì)象
 */
export function Compress(img:any,height:number,width:number,callback:Function) {
 let canvas:any = document.createElement('canvas')
 let context:any = canvas.getContext('2d')
 canvas.width = width
 canvas.height = height
 context.clearRect(0,0,width,height)
 context.drawImage(img,0,0,width,height)
 callback(canvas.toDataURL("image/jpeg", 0.75))
}

拖拽排序、拖拽刪除

拖拽排序、拖拽到指定位置刪除是通過監(jiān)聽touch事件來(lái)實(shí)現(xiàn)的。
核心思路：
1、獲取到圖片dom元素，給圖片dom元素添加ontouchstart、ontouchend、ontouchmove 方法。
2、在ontouchstart方法中new一個(gè)時(shí)間節(jié)點(diǎn)，在ontouchend中也new一個(gè)時(shí)間節(jié)點(diǎn)，通過判斷兩個(gè)時(shí)間節(jié)點(diǎn)之間的時(shí)間間隔判斷是點(diǎn)擊事件還是長(zhǎng)按事件。
3、ontouchstart中設(shè)置settimeout方法是延時(shí)判斷是點(diǎn)擊方法還是長(zhǎng)按方法，如果是長(zhǎng)按方法的則獲取圖片的所在頁(yè)面中的位置，設(shè)置圖片的位置為點(diǎn)擊屏幕的位置，改變圖片的布局方式，在ontouchmove方法中設(shè)置圖片的位置跟隨觸摸屏幕的位置變化。
4、移動(dòng)圖片后松開手時(shí)，觸發(fā)ontouchend方法，判斷手指離開后，圖片所在的位置是否處在刪除的區(qū)域當(dāng)中，如果在則刪除圖片，并且重新渲染圖片列表，重新添加touch方法。
如果不在刪除的區(qū)域中，則進(jìn)行圖片位置排序，排序后還原圖片樣式。并強(qiáng)制重新渲染圖片列表。

代碼如下：

Compress(img,e.path[0].height,e.path[0].width,(newImg:any) => {
 this.imgList.push(newImg)
 this.isLoading = false
 // 在這里給加入方法
 setTimeout(() => {
  this.addTouchEvent() 
 });
})



addTouchEvent(){
 let domList:any = document.querySelectorAll('.show-img')
 if (domList) {
  let domMoveFlag:boolean = true
  domList.forEach((item:any,index:any) => {
   item.ontouchstart = null
   item.ontouchmove = null
   item.ontouchend = null
   item.ontouchstart = (startEvent:any) => {
    startEvent.preventDefault()
    console.log(startEvent)
    this.touchStartTime = new Date()
    setTimeout(() => { 
     if (domMoveFlag) {  
      console.log('執(zhí)行元素位置操作過程')
      this.showDeleteArea = true
      let domClient:any = item.getBoundingClientRect()
      console.log(domClient)
      this.firstPosition = {
       x:startEvent.changedTouches[0].pageX,
       y:startEvent.changedTouches[0].pageY
      }
      item.style.position = 'fixed'
      item.style.height = domClient.height + 'px'
      item.style.width = domClient.width + 'px'
      item.style.top = domClient.top + 'px'
      item.style.left = domClient.left + 'px'
      item.style.padding = 0
      item.style.zIndex = 9
      // 添加拖拽事件
      item.ontouchmove = (moveEvent:any) => {
       // console.log(moveEvent)
       item.style.top = moveEvent.changedTouches[0].pageY - this.firstPosition.y + domClient.top + 'px'
       item.style.left = moveEvent.changedTouches[0].pageX - this.firstPosition.x + domClient.left + 'px'
      }      
     }   
    }, 600);
   }
   item.ontouchend = (endEvent:any) => {
    let time:any = new Date()
    console.log(time - this.touchStartTime)
    if (time - this.touchStartTime <= 400) {
     domMoveFlag = false
     item.click()
     setTimeout(() => {
      this.addTouchEvent() 
     });
    } else {
     let newItemCenter:any = item.getBoundingClientRect()
     let centerY:any = newItemCenter.top + newItemCenter.height / 2
     let centerX:any = newItemCenter.left + newItemCenter.width / 2
     let deleteDom:any = document.querySelector(".deleteImg")
     let deleteArea:any = deleteDom.getBoundingClientRect()
     if (centerY >= deleteArea.top) {
      let _imgList = JSON.parse(JSON.stringify(this.imgList))
      let currentImg:any = _imgList.splice(index,1)
      this.imgList = []
      this.showDeleteArea = false
      setTimeout(() => {
       this.imgList = _imgList
       setTimeout(() => {
        this.addTouchEvent() 
       });
      });
      return
     }
     this.showDeleteArea = false
     // 計(jì)算所有圖片元素所在頁(yè)面位置
     let domParentList:any = document.querySelectorAll('.imgCtn')
     domParentList && domParentList.forEach((domParent:any,cindex:any) => {
      let domPos:any = (domParent.getBoundingClientRect())
      if ( 
       centerY >= domPos.top 
       && centerY <= domPos.bottom 
       && centerX >= domPos.left
       && centerX <= domPos.right
      ) {
       // 重新排序
       console.log('在目標(biāo)區(qū)域內(nèi)，重新排序')
       let _imgList = JSON.parse(JSON.stringify(this.imgList))
       let currentImg:any = _imgList.splice(index,1)
       _imgList.splice(cindex,0,...currentImg)
       this.imgList = []
       setTimeout(() => {
        this.imgList = _imgList
        setTimeout(() => {
         this.addTouchEvent() 
        });
       });
      }
     });
     // 還原樣式
     item.style.position = 'absolute';
     item.style.height = '100%'
     item.style.width = '100%'
     item.style.top = '0'
     item.style.left = '0'
     item.style.padding = '10px'
    }
   }
  })
 }
}

關(guān)于使用Vue2怎么實(shí)現(xiàn)一個(gè)圖片上傳、壓縮、拖拽排序等功能問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。