ohplay_system/src/components/Upload/index.vue

<template>
  <div>
    <el-upload
      :disabled="disabledUpload"
      ref="upload"
      v-if="type === 'file' ? true : hideUpload"
      :action="action"
      :headers="headers"
      :data="data"
      :show-file-list="false"
      :list-type="type === 'file' ? '':'picture-card'"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :on-progress="onProgress"
      :on-error="onError"
    >
      <el-button v-if="type === 'file'" type="primary" style="margin:0">{{ title }}</el-button>
      <i v-else slot="default" class="el-icon-plus" />
    </el-upload>
    <div class="upload-img" v-if="type === 'file' ? false : hideUpload === false">
      <el-image :src="newUrl" />
      <span v-if="disabled === false" class="upload-btn">
        <i class="el-icon-delete" @click="handleRemove" />
      </span>
    </div>
  </div>
</template>

<script>
// import { client } from '@/api/oss'
import { getToken } from "@/utils/auth";
export default {
  props: {
    type: {
      type: String,
      default: "image",
    },
    // 图片
    url: {
      type: String,
      default: "",
    },
    // 隐藏删除按钮
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 额外参数
      data: {
        multipartFile: new FormData(),
      },
      // 文件大小
      size: 0,
      // 请求头
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // 上传地址
      action: "",
      // 隐藏上传按钮
      hideUpload: true,
      // 禁用上传按钮
      disabledUpload: false,
      // 按钮标题
      title: "上传文件",
      // 图片
      newUrl: "",
    };
  },
  watch: {
    url(val) {
      this.newUrl = val;
      this.hideUpload = val ? false : true
    },
  },
  mounted() {
    if (this.url) {
      this.newUrl = this.url;
      this.hideUpload = false;
    }

    this.action =
      this.type === "image"
        ? `${process.env.VUE_APP_BASE_API}/system/file/picture/upload`
        : `${process.env.VUE_APP_BASE_API}/system/file/file/upload`;
  },
  methods: {
    // 上传服务器之前提交文件
    beforeUpload(file) {
      this.data.multipartFile = file;
      this.size = file.size;
      this.disabledUpload = true;
    },

    // 上传成功
    onSuccess(file) {
      this.hideUpload = false;
      this.disabledUpload = false;
      this.newUrl = file.data;
      this.title = "上传成功";
      this.$emit("success", {
        file: this.newUrl,
        size: this.size,
      });
    },

    // 上传时 进度条
    onProgress(file) {
      this.title = `${parseInt(file.percent - 1)}%`;
    },

    // 上传失败
    onError(err) {
      this.title = `上传失败`
    },

    // 删除
    handleRemove() {
      this.hideUpload = true;
      this.$emit("delete", (this.newUrl = ""));
    },

    // httpRequest(e) {
    //   client.put(e.file.name, e.file).then(res => {
    //     console.log(res);
    //   })
    // },
  },
};
</script>

<style lang="scss" scoped>
.upload-img {
  position: relative;
  width: 148px;
  height: 148px;

  .upload-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
    background: rgb(0 0 0 / 50%);
    color: #fff;
    text-align: center;
    line-height: 148px;
    font-size: 24px;
    opacity: 0;

    i {
      cursor: pointer;
    }
  }

  .upload-btn:hover {
    opacity: 1;
  }
}
</style>