el-upload文件上传组件

一、介绍

element-ui的组件之一，用来点击上传文件

官方是使用 before-upload 限制用户上传的图片格式和大小。但是某些浏览器不支持此方法，所以使用on-change来代替。

二、代码

<template>
  <!--选择图片-->
  <el-upload
    style="width: 100%;"
    action="/"
    class="avatar-uploader"
    accept="image/*"
    :auto-upload="false"
    :show-file-list="false"
    :on-change="selectPic">
    <img v-if="imgUrl" :src="imgUrl" class="avatar">
    <div v-else class="avatar-uploader-icon">
      <div style="padding-bottom: 20px">
        <img :src="back||'/static/media/imgUpload.png'" height="80" style="margin-bottom: 10px;margin-top: 30px">
        <br>
        <span style="line-height: 20px"> {{text}}</span>
      </div>
    </div>
  </el-upload>
</template>

<script>
  export default {
    name: "selectImg",
    data() {
      return {}
    },
    props: ['imgUrl', 'text', 'back'],
    created() {
    },
    methods: {
      selectPic(file) {
        this.GetPicFileBase64(file, (base64) => {
          this.$emit('select', base64.split(',')[1], file)
        })
        return false
      }
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: rgb(245, 207, 150);
  }

  .avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    margin: 8px;
    background: rgb(216, 234, 242);
    border-radius: 5px;
    box-sizing: border-box;
  }

  .avatar {
    width: 100%;
    display: block;
  }
</style>

//图片上传处理
Vue.prototype.GetPicFileBase64 = function (file, callback) {
  let load = (base64) => {
    if (base64 && file.raw.size < (this.$store.state.max_pic_size * 1024 * 1024) && file.raw.type.match("image")) {
      callback(base64)
    } else {
      alert(`请检查图片文件类型,大小不超过${this.$store.state.max_pic_size}MB`)
    }
  }
  let err = (e) => {
    this.Log(e)
    alert("读取文件失败,请检查浏览器设置重试")
  }
  let base64 = ''
  if (Image) {
    let Img = new Image();
    Img.src = file.url;
    Img.onload = () => {
      let width = Img.width;
      let height = Img.height;
      let canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;
      canvas.getContext("2d").drawImage(Img, 0, 0, width, height);
      base64 = canvas.toDataURL('image/jpeg', 0.8);
      load(base64)
    }
    Img.onerror = err
  } else if (FileReader) {
    let fr = new FileReader()
    fr.readAsDataURL(file.raw)
    fr.onerror = err
    fr.onload = (e) => {
      base64 = e.target.result
      load(base64)
    }
  } else {
    alert("您的设备有不兼容的功能,请更换浏览器重试或联系客服")
    return
  }
}