elementui 上传图片显示长宽 element ui 上传图片

因为我们的项目是element ui 写的，所以也就根据element ui 的上次组件来进行一个编写。写完发现，哎，不对呀，我其他地方也需要这个上传，所以我就封装一个组件，写的不怎么好，请见谅。

<template>
  <div class="MaxBox">
    <el-form>
      <el-form-item
        v-if="loadType == 'pictureFile' ? true : false"
        prop="pictures"
        :label="_loadName"
      >
        <div class="img_upload_line">
          <div class="img_upload_box">
            <el-upload
              class="uploadimage"
              ref="upload"
              :show-file-list="_ShowList"
              :action="uploadUrls"
              :multiple="_ManyLoad"
              list-type="picture-card"
              :with-credentials="true"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-error="handleError"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-change="handleChange"
              :auto-upload="autoUpload"
              :headers="{
                token: token,
              }"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </div>
      </el-form-item>
      <el-form-item
        v-if="loadType == 'dragFile' ? true : false"
        prop="pictures"
        :label="_loadName"
      >
        <el-upload
          class="upload-demo"
          :drag="_drag"
          :action="uploadUrls"
          :multiple="_ManyLoad"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-error="handleError"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :auto-upload="autoUpload"
          :on-change="handleChange"
          :headers="{
            token: token,
          }"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入的图片的地址
import { uploadImg, getToken } from '@/api/serve/index.js'
export default {
  props: {
    // 传过来的是否是单文件上传还是多文件上传
    loadType: {
      type: String,
      default: 'pictureFile'
    },
    // 是否支持拖拽
    _drag: {
      type: Boolean,
      default: true
    },
    // 是否显示已上传文件列表
    _ShowList: {
      type: Boolean,
      default: true
    },
    // 是否支持多选文件
    _ManyLoad: {
      type: Boolean,
      default: true
    },
    // 是否支持支持发送 cookie 凭证信息
    _upCookie: {
      type: Boolean,
      default: true
    },
    // 左侧名字
    _loadName: {
      type: String,
      default: '上传图片'
    },
    // 上传的文件大小
    _size: {
      type: String,
      default: '1024'
    },
    // 上传图片类型
    _fileTypeList: {
      type: Array,
      default: () => [
        'jpg',
        'jpeg',
        'png',
        'gif',
        'pdf',
        'doc',
        'docx',
        'xls',
        'xlsx',
        'JPG',
        'JPEG',
        'PBG',
        'GIF',
        'PDF',
        'DOC',
        'DOCX',
        'XLS',
        'XLSX'
      ]
    },
    // 上传的数量
    FileLimit: {
      type: Number,
      default: 10
    },
    autoUpload: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      // 获取的img提交路径
      uploadUrls: uploadImg,
      // 上传获取的token值
      token: getToken('token') || '',
      // 文件大小的限制
      newSize: Number(this._size),
      // 文件的路径数组
      imgUrlArr: []
    }
  },
  methods: {
    // 移除图片
    handleRemove (file, fileList) {
      console.log(file, fileList)
      this.$emit('_handleRemove', file, fileList)
    },
    // 预览 查看图片
    handlePictureCardPreview (file) {
      // this.dialogImageUrl = file.url;
      // this.dialogVisible = true;
      this.$emit('_handlePreview', file)
    },
    // 上传失败
    handleError (err, file, fileList) {
      this.$emit('_handleError', err, file, fileList)
    },
    // 文件上传之前调用做一些拦截限制
    beforeAvatarUpload (file) {
      const arr = file.name.split('.')
      const str = arr[arr.length - 1]
      const isFile =
        this._fileTypeList.filter(item => item.indexOf(str) > -1).length > 0
      this.$emit('_beforeAvatarUpload', file)
      // 先判断文件类型符不符合
      if (isFile) {
        // 再判断文件大小符不符合
        // 设置文件最大限制  , 以M为单位
        const isFileLimit = file.size / 1024 / 1024 < this.FileLimit
        if (isFileLimit) {
          return isFile && isFileLimit
        } else {
          // 如果文件大小不符合
          this.$message.warning(
            `你的文件已经超出了${this.newSize}的大小,请重新上传`
          )
          return isFileLimit
        }
      } else {
        // 如果文件类型不符合, FileTypeErrorText 文件提示内容
        this.$message.warning(
          `您的文件类型和上传的${this._fileTypeList}不一致请重新上传`
        )
        return isFile
      }
    },
    // 图片上传成功
    handleAvatarSuccess (res, file) {
      this.imgUrlArr.push(file)
      const arr = this.imgUrlArr
      this.$emit('_handleSuccess', res, file, arr)
    },
    // 点击主动发送请求
    submitUpload () {
      this.$refs.upload.submit()
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange (file, fileList) {
      this.$emit('_handleChange', file, fileList)
    }
  }
}
</script>
<style scoped>
.MaxBox {
  width: 100%;
}
.img_example {
  display: flex;
  align-items: center;
  margin: 0 20px;
  cursor: pointer;
  height: 150px;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}
/* .uploadimage {
  width: 200px;
} */
.img_upload_line {
  display: flex;
}
.img_upload_box {
  width: 150px;
  height: 150px;
  overflow: hidden;
}
</style>

使用注意       上传地址 我是抽离出来的，然后还有上次token 也可以不传，
 但是地址是必传的

使用

<upload
 	 // 侧边的文职
    _loadName="上传封面："
    // 上传成功返回的函数
    @_handleSuccess="success"
 ></upload>

上面的代码特别简单，然后定义个函数 就得到上传返回的http的地址， 然后发送给后端就欧克了， 然后如果回显的话，我是做了一个盒子，然后覆盖在这个盒子上面，如果要删除的话就让这个盒子消失，让下面的盒子出来，一个讨巧的行为。