Requirements, limit the size and scale of the uploaded images

1. The HTML part

<template> <! <div> <el-upload class="avatar-uploader" action="" :http-request="uploadImage" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" Class ="avatar"> <div v-else class="prompt_box"> < I class="el-icon-picture-outline"></ I >< div class="prompt"> </div> </div> <div class="el-upload__tip" slot="tip"> </div> <div class=" el-Upload__tip "slot="tip"> <div class=" el-Upload__tip" slot="tip">Copy the code

2. The js logical part

<script> import {imageUp} from '@/ API /users' export default {data () {return {imageUrl: ", // image address}}, methods: {/ / picture upload before the callback beforeAvatarUpload (file) {/ / judgment file size M as the unit const fileSize. = the file size 1024/1024 < / 2 / / judgment document const wide high proportion aaa = new Promise((resolve, Reject) = > {const url = window. The url | | window. WebkitURL const img = new Image (img). The onload = function () {/ / picture proportion console.log(img.width, img.height) const valid = img.width / img.height === 16 / 9 // eslint-disable-next-line prefer-promise-reject-errors valid ? resolve() : reject() } img.src = url.createObjectURL(file) }).then(() => { return file }, () => {this.$message.error(' the image ratio is not acceptable, please select the 16:9 image ') // eslint-disable-next-line prefer-promise-reject-errors return Promise.reject() }) if (['image/png', 'image/jpeg', 'image/ JPG '].indexof (file.type) === -1) {this.message. Error (' please upload the correct image format ') return false} if (! {this.message. Error (' no more than 2MB')} return fileSize && aaa}, Async uploadImage (content) {const formData = new formData () formData.append('fileName', content.file) const res = await imageUp(formData) if (res.code ! == 200) return this.$message. Error (res.messages) this.imageurl = res.data.address Res.data.id)}, // callback handleAvatarSuccess (res, file) { this.imageUrl = URL.createObjectURL(file.raw) } } } </script>Copy the code

3. Style

<style lang="less" scoped>
 /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    width: 325px;
    height: 185px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 100%;
    height: 100%;
    display: block;
  }
  .prompt_box{
    width: 100%;
    height: 100%;
    background-color: #e2e2e2;
    position: relative;
    i{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      font-size: 60px;
      color: #afafaf;
    }
    .prompt{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 30px;
      background-color: #05b709;
      color: #ffffff;
      font-size: 16px;
      line-height: 30px;
    }
  }
  .el-upload__tip{
    margin-top: -12px;
    text-indent: 10px;
  }
</style>
Copy the code

4. Component usage

<uploadImg @getImgInfo='getImgInfo(arguments)'></uploadImg>

GetImgInfo (val) {console.log(val)}Copy the code