learning-system-portal/src/components/ImageUpload/artimgUpload.vue

<template>
  <div class="component-upload-image" :style="`width:${width};height:${height};`"> 
    <el-upload
       drag
      :action="uploadImgUrl"
      class="image-upload"
      list-type="picture-card"
      :disabled="disabled"
      :on-success="handleUploadSuccess"
      :on-progress="handleProgress"
      :before-upload="handleBeforeUpload"
      :on-error="handleUploadError"
      :accept="accept"
      name="file"
      :data="data"
      :show-file-list="false"
      :headers="headers"
      style="display: inline-block;">
      <el-image v-if="!value" :src="value" :style="`width:${width};height:${height};`">
        <div slot="error" class="image-slot">
           <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png/bmp/jpeg文件，且不超过500kb</div>
        </div>
      </el-image>
      <div v-else class="image" :style="`width:${width};height:${height};`">
        <el-image :src="value" :style="`width:${width};height:${height};`" fit="fill"/>
        <div class="mask" :style="`width:${width};height:${height};`">
          <div class="actions" :style="`line-height:${height};`">
            <span title="预览" @click.stop="dialogVisible = true">
              <i class="el-icon-zoom-in" />
            </span>
            <span title="移除" @click.stop="removeImage">
              <i class="el-icon-delete" />
            </span>
          </div>
        </div>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
      <img :src="value" style="display: block; max-width: 100%; margin: 0 auto;">
    </el-dialog>
  </div>
</template>

<script>
import * as imageConversion from 'image-conversion';
import { getToken } from "@/utils/token";
export default {
  data() {
    return {
      dialogVisible: false,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/xboe/sys/xuploader/file/upload", // 上传的图片服务器地址
      headers: {
        'XBOE-Access-Token': getToken(),
      },
      data:{
        dir:this.dir
      }
    };
  },
  props: {
    text:{
      type:String,
      default:'上传图片'
    },
    disabled:{
      type:Boolean,
      default:false
    },
    height:{
      type:String,
      default:'150px'
    },
    width:{
      type:String,
      default:'150px'
    },
    dir:{
      type:String,
      default:''
    },
    accept:{
      type:String,
      default:'.png,.jpg,.gif,.jpeg,.bmp'
    },
    value: {
      type: String,
      default: "",
    },
    // 值为  10MB  500KB 等有MB或KB后缀的形式
    fileSizeLimit:{
      type: String,
      default: '10MB',
    },
    // 按比率压缩，优先于按大小
    compress:{
      type: Number,
      default: 1,
    },
    // 按大小压缩
    compressAccurately:{
      type: Number,
      default: null,
    },
  },
  methods: {
    removeImage() {
      this.$emit("remove",this.value);
    },
    handleUploadSuccess(res) {
      this.$emit("success", res);
      this.loading.close();
    },
    handleProgress(event, file, fileList){
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    endWith(str,endStr){
      var d=str.length-endStr.length;
      return (d>=0&&str.lastIndexOf(endStr)==d);
    },
    handleBeforeUpload(file) {
      let that = this;
      return new Promise((resolve, reject) => {
        let sizeLimt = 0;
        if(this.fileSizeLimit){
          let size = parseInt(this.fileSizeLimit.substring(0,this.fileSizeLimit.length - 2));
          if(typeof size === 'number' && !isNaN(size)){
            if(that.endWith(this.fileSizeLimit,"MB")){
              sizeLimt = size * 1024 * 1024;
            }else if(that.endWith(this.fileSizeLimit,"KB")){
              sizeLimt = size * 1024;
            }
          }          
        }
        if (sizeLimt > 0 && file.size > sizeLimt) {
          that.$message.error("图片不能超过"+this.fileSizeLimit+",请重新上传！")
          reject(file)
        }
        // 小于1表示需要压缩
        if(that.compress < 1){
          imageConversion.compress(file,that.compress).then(res=>{
            resolve(res);
          })
        }else{
          if(that.compressAccurately){
            imageConversion.compressAccurately(file, that.compressAccurately).then(res => {
              resolve(res)
            })
          }
        }
        resolve(file)
      })      
    },
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },
  },
  watch: {},
};
</script>

<style scoped lang="scss">
 ::v-deep .el-upload-dragger{
  width: 100% !important;
  height: 100% !important;
}
  .image-upload{
    width: 410px;
    height: 168px;
  }
  .image-card .el-upload--picture-card,.image-card .el-upload-list--picture-card .el-upload-list__item{
      background-color: #fbfdff;
      border: 1px dashed #c0ccda;
      border-radius: 6px;
      box-sizing: border-box;
      vertical-align: top;
  }
.el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    vertical-align: top;
    line-height: 100%;
}
  .image-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  image-uploader .el-upload--picture-card{
    width: 100%;
  }
  image-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .image-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    text-align: center;
    margin-top: 50px;
    display: block;
  }
  .icon-text{
    font-size: 14px;
    display: block;
    height: 30px;
    line-height: 35px;
  }
.image {
  position: relative;
  .mask {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
  }
  &:hover .mask {
    opacity: 1;
  }
}
</style>