Vue文件上传图片，文档

Posted 2021-08-16 龖龖龖

原生文件上传：

      <div style="display: inline-block; position: relative">
          <input
            type="file"
            class="choiceFileInput"
            @change="upLoadFile($event, 1)"
          />
          <p class="choiceFileBtn">选择文件</p>
        </div>
        //在data中声明fileName1 的空变量
        <span>{{ fileName1 }}</span>

   //文件上传
    upLoadFile($event, index) {
    //改变this指向
      var that = this;
      //拿到获取到的文件
      var file = $event.target.files[0];
      //提前声明 （将文件转成base64格式
      let base64 = "";
      if (file !== undefined) {
        //var filesize = file.size;
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (event) {
        //判断如果有多个文件需要上传，则需要从当前的方法中传输一个唯一标识进行判断
          if (index == 1) {
          // 在data中声明一个fileName1 的变量进行赋值
            that.fileName1 = file.name;
            base64 = event.target.result;
            //msgObj 在data中声明一个空对象进行赋值
            //对获取到的字符串进行截取 目的：获取的是从后往前查找第一个逗号后面的字符
            that.msgObj.file_base64=base64.substring(base64.lastIndexOf(",") + 1);
            event.target.value = "";
          }
        };
      }
    },

一、 图片上传,获取图片文件event 事件对象 ； index上传动作触发位置

   upLoad ($event, index) {
      var that = this
      var file = $event.target.files[0]
      let fileName = file.name
      if (file !== undefined) {
        if (file.type.indexOf('image') === 0) {
          var filesize = file.size
          var reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = function (event) {
            var re = event.target.result
            //将获取到的参数传递到压缩方法中
            that.getBase64Image($event, re, index, filesize, fileName)
          }
        }
      }
    },

二·、获取base64图片，并压缩

   getBase64Image (event, path, index, size, fileName) {
      var that = this
      var img = new Image()
      img.src = path
      img.onload = function () {
        // 默认比例压缩
        var w = this.width
        var h = this.height
        var newWidth
        var newHeight
        var scale = w / h // 宽高比
        var quality = 0.7 // 默认图片质量为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
        // 判断图片宽高比
        if (w - h >= 0) {
          newWidth = w
          newHeight = parseInt(newWidth / scale)
          if (size >= 2 * 1024 * 1024) {
            anw.nodeValue = newWidth
            anh.nodeValue = newHeight
          } else {
            anw.nodeValue = w
            anh.nodeValue = h
          }
        }
        if (h - w >= 0) {
          scale = h / w
          newHeight = h
          newWidth = parseInt(newHeight / scale)
          if (size >= 2 * 1024 * 1024) {
            anw.nodeValue = newWidth
            anh.nodeValue = newHeight
          } else {
            anw.nodeValue = w
            anh.nodeValue = h
          }
        }
        if (size > 1920 * 1080) {
          canvas.setAttributeNode(anw)
          canvas.setAttributeNode(anh)
          ctx.drawImage(this, 0, 0, w, h)
          // quality值越小，所绘制出的图像越模糊
          var base64 = canvas.toDataURL('image/jpeg', quality)
          that.showUploadImage(event, base64, index, fileName)
        } else {
          canvas.setAttributeNode(anw)
          canvas.setAttributeNode(anh)
          ctx.drawImage(this, 0, 0, w, h)
          // quality值越小，所绘制出的图像越模糊
          var base64 = canvas.toDataURL('image/jpeg', quality)
          that.showUploadImage(event, base64, index, fileName)
        }
      }
    },

三、上传图片展示

 showUploadImage (event, base64, index, fileName) {
      if (index === 1) {
        this.operatorCurPic = base64
        this.operatorCurPicName = fileName
        event.target.value = ''
      }
      if (index === 2) {
        this.operatorFontPic = base64
        this.operatorFontPicName = fileName
        event.target.value = ''
      }
      if (index === 3) {
        this.operatorBackPic = base64
        this.operatorBackPicName = fileName
        event.target.value = ''
      }
      if (index === 4) {
        this.responFontPic = base64
        this.responFontPicName = fileName
        event.target.value = ''
      }
      if (index === 5) {
        this.responBackPic = base64
        this.responBackPicName = fileName
        event.target.value = ''
      }
      if (index === 6) {
        this.otherPic1 = base64
        this.otherPic1Name = fileName
        event.target.value = ''
      }
      if (index === 7) {
        this.otherPic2 = base64
        this.otherPic2Name = fileName
        event.target.value = ''
      }
      if (index === 8) {
        this.otherPic3 = base64
        this.otherPic3Name = fileName
        event.target.value = ''
      }
    },