input上传图片后展示,实现图片放大、缩小、拖拽功能

<template>
<div>
    <img :src="image" alt="">
    <input type="file" @change="changeUpload($event)">
    <div ref="imgWrap" class="modal-img-wrap" @mousewheel.prevent="rollImg" >
         <img ref="image" :style="{transform:'scale('+multiples+')'}" :src="image" @mousedown="moveImg" alt="大图" class="modal-img"/>
            <div class="modal-img-btn">
                <button @click="toBIgChange">放大</button>
                <button @click="toSmallChange">缩小</button>
            </div>
    </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      image: “”,
      multiples: 1
    }
   }，
  methods: {
      toBIgChange() {
        if (this.multiples >= 4) {
            return;
        }
        this.multiples += 0.25;
        console.log(this.multiples)
      },
    // 缩小
    toSmallChange() {
        if (this.multiples <= 1) {
            return;
        }
        this.multiples -= 0.25;
    },
    changeUpload(e) {
       console.log(e.target.files[0])
        var file = e.target.files[0]
        console.log(file)
        var reader = new FileReader()
        var that = this
        reader.readAsDataURL(file)
        reader.onload = function(e) {
            that.option.img = this.result
          that.dialogVisible = true
        }
      },
    moveImg(e){
        e.preventDefault()
        // 获取元素
        let imgWrap = this.$refs.imgWrap
        let img = this.$refs.img
        let x = e.pageX - img.offsetLeft
        let y = e.pageY - img.offsetTop
        // 添加鼠标移动事件
        imgWrap.addEventListener('mousemove', move)
        function move (e) {
            img.style.left = e.pageX - x + 'px'
            img.style.top = e.pageY - y + 'px'
        }
        // 添加鼠标抬起事件，鼠标抬起，将事件移除
        img.addEventListener('mouseup', () => {
            imgWrap.removeEventListener('mousemove', move)
        })
        // 鼠标离开父级元素，把事件移除
        imgWrap.addEventListener('mouseout', () => {
            imgWrap.removeEventListener('mousemove', move)
        })
    },
    rollImg () {
        console.log(event.wheelDelta)
        /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
        let zoom = parseInt(this.$refs.img.style.zoom) || 100
        /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
        zoom += event.wheelDelta / 12
        /* 最小范围 和 最大范围 的图片缩放尺度 */
        if (zoom >= 80 && zoom < 500) {
            this.$refs.img.style.zoom = zoom + '%'
        }
        return false
    },
  }
}
</script>
<style lang="less" scoped>
.modal-img {
    position: absolute;
    // left: 50%;
    // top: 50%;
    // transform: translate(-50%, -50%);
    cursor: move;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    &-wrap {
      position: relative;
      width: 500px;
      height: 500px;
      overflow: hidden;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &-btn{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
    }
}
</style>