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
  }
}