vue 利用原生input上传图片并预览并删除

最新推荐文章于 2022-09-30 16:44:03 发布

转载最新推荐文章于 2022-09-30 16:44:03 发布 · 546 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/lst619247/p/10748724.html

文章标签：

#javascript

本文详细介绍了基于Vue的图片上传组件实现，包括如何通过监听文件输入事件实现图片预览、压缩及格式验证，并展示了如何使用Canvas进行图片压缩，以及如何在用户界面上实时更新图片预览效果。

<template>

  <div class="com-upload-img">

    <div class="img_group">

      <div v-if="allowAddImg" class="img_box">

        <input type="file" accept="image/*" multiple="multiple" @change="changeImg($event)">

        <div class="filter" />

      </div>

      <div v-for="(item,index) in imgArr" :key="index" class="img_box">

        <div class="img_show_box">

          <img :src="item" alt="">

          <i class="img_delete" @click="deleteImg(index)" />

          <!-- <i class="img_delete" @click="imgArr.splice(index,1)"></i> -->

        </div>

      </div>

    </div>

  </div>

</template>

js部分

<script>

export default {

  name: 'ComUpLoad',

  data() {

    return {

      imgData: '',

      imgArr: [],

      imgSrc: '',

      allowAddImg: true

    }

  },

  methods: {

    changeImg: function(e) {

      var _this = this

      var imgLimit = 1024

      var files = e.target.files

      var image = new Image()

      if (files.length > 0) {

        var dd = 0

        var timer = setInterval(function() {

          if (files.item(dd).type !== 'image/png' && files.item(dd).type !== 'image/jpeg' && files.item(dd).type !== 'image/gif') {

            return false

          }

          if (files.item(dd).size > imgLimit * 102400) {

            // to do sth

          } else {

            image.src = window.URL.createObjectURL(files.item(dd))

            image.onload = function() {

              // 默认按比例压缩

              var w = image.width

              var h = image.height

              var scale = w / h

              w = 200

              h = w / scale

              // 默认图片质量为0.7，quality值越小，所绘制出的图像越模糊

              var quality = 0.7

              // 生成canvas

              var canvas = document.createElement('canvas')

              var ctx = canvas.getContext('2d')

              // 创建属性节点

              var anw = document.createAttribute('width')

              anw.nodeValue = w

              var anh = document.createAttribute('height')

              anh.nodeValue = h

              canvas.setAttributeNode(anw)

              canvas.setAttributeNode(anh)

              ctx.drawImage(image, 0, 0, w, h)

              var ext = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase()// 图片格式

              var base64 = canvas.toDataURL('image/' + ext, quality)

              // 回调函数返回base64的值

              if (_this.imgArr.length <= 4) {

                _this.imgArr.unshift('')

                _this.imgArr.splice(0, 1, base64)// 替换数组数据的方法，此处不能使用：this.imgArr[index] = url;

                if (_this.imgArr.length >= 5) {

                  _this.allowAddImg = false

                }

              }

            }

          }

          if (dd < files.length - 1) {

            dd++

          } else {

            clearInterval(timer)

          }

        }, 1000)

      }

    },

    deleteImg: function(index) {

      this.imgArr.splice(index, 1)

      if (this.imgArr.length < 5) {

        this.allowAddImg = true

      }

    }

  }

}

</script>