hir_web/src/views/system/hospital/components/uploadLogo.vue

<template>
  <div class="upload-container">
    <el-upload class="upload-demo" :class="{ uploadDisabled: fileList.length > 0 ? true : false }" action
      :http-request="uploadFile" :before-upload="beforeUpload" :file-list="fileList" :on-preview="handlePreview"
      :on-remove="remove" :limit="1" :on-exceed="handleExceed" accept=".png,.jpg,.jpeg" list-type="picture-card">
      <!-- <el-button size="small" type="primary" :disabled="btnDisabled"
        >上传</el-button
      >
      <span slot="tip" class="el-upload__tip">(只能上传png/jpg/jpeg文件)</span> -->
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <img class="el-upload-list__item-thumbnail" :src="`${OSSclientConfig.basePath}${file.url}`" alt=""
          crossorigin="anonymous" />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span class="el-upload-list__item-delete" @click="handleRemove(file)" v-if="!disabled">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <!-- <p
      v-if="fileList.length > 0 && disabled"
      class="logoAMessage"
      @click.stop="handlePreview(fileList[0])"
      style="margin: 0"
    >
      <i class="el-icon-document"></i>
      <span>{{ fileList.length > 0 ? fileList[0].name : "" }}</span>
    </p> -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="70%" :src="`${OSSclientConfig.basePath}${dialogImageUrl}`" crossorigin="anonymous" alt="" />
    </el-dialog>
  </div>
</template>
<script>
const type = "Statement of Work";
export default {
  name: "UploadLogo",
  props: {
    path: {
      required: true,
      default: "",
    },
    disabled: {
      required: true,
      default: false,
    },
  },
  data() {
    return {
      fileList: [],
      btnDisabled: false,
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  watch: {
    path: {
      handler() {
        if (this.path) {
          let name = this.path.split("/");
          this.fileList = [
            {
              name: name[name.length - 1],
              path: this.path,
              fullPath: this.OSSclientConfig.basePath + this.path,
              url: this.path,
            },
          ];
        }
      },
      immediate: true,
    },
  },
  methods: {
    remove(file, fileList) {
      if (this.disabled) return false
      this.$emit("update:path", null);
    },
    fileToBlob(file) {
      // 创建 FileReader 对象
      const reader = new FileReader();
      return new Promise((resolve) => {
        // FileReader 添加 load 事件
        reader.addEventListener("load", (e) => {
          let blob;
          if (typeof e.target.result === "object") {
            blob = new Blob([e.target.result]);
          } else {
            blob = e.target.result;
          }
          resolve(blob);
        });
        // FileReader 以 ArrayBuffer 格式 读取 File 对象中数据
        reader.readAsArrayBuffer(file);
      });
    },
    // 上传oss
    async uploadToOSS(name, file) {
      try {
        let res = await this.OSSclient.put(
          `/System/GeneralDocuments/${name}`,
          file
        );
        return res;
      } catch (err) {
        console.log(err);
        return false;
      }
    },
    initFileList(fileList) {
      this.fileList = fileList;
    },
    async uploadFile(param) {
      var fileName = param.file.name;
      this.btnDisabled = true;
      let file = await this.fileToBlob(param.file);
      let res = await this.uploadToOSS(fileName, file);
      this.btnDisabled = false;
      if (!res) return;
      this.fileList = [
        {
          name: fileName,
          path: res.name,
          fullPath: this.OSSclientConfig.basePath + res.name,
          url: res.name,
        },
      ];
      console.log(this.fileList);
      this.$emit("update:path", res.name);
      return console.log(res);
    },
    beforeUpload(file, fileList) {
      const isValidFile = this.fileValid(file.name, ["png", "jpg", "jpeg"]);
      if (isValidFile) {
        this.fileList = [];
      } else { //请上传PNG/JPG/JPEG文件
        this.$alert(this.$t("system:hospital:uploadLog:verificationFormat"));
        return false;
      }
    },
    handlePreview(file) {
      file.fullPath ? window.open(file.fullPath, "_blank") : "";
    },
    handleExceed(files, fileList) {
      this.$message.warning(`Upload is currently limited to 1 file`);
    },
    fileValid(fileName, typeArr) {
      var extendName = fileName
        .substring(fileName.lastIndexOf(".") + 1)
        .toLocaleLowerCase();
      if (typeArr.indexOf(extendName) > -1) {
        return true;
      } else {
        return false;
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file) {
      if (this.disabled) return false
      this.fileList = [];
      this.$emit("update:path", null);
    },
  },
};
</script>
<style>
.upload-container .el-upload--text {
  border: none;
  width: 80px;
  height: 30px;
}

.upload-container .el-form-item__label {
  font-size: 12px;
}

.upload-container .el-upload-list__item {
  font-size: 12px;
}

.logoAMessage {
  font-size: 12px;
  cursor: pointer;
}

.upload-container .uploadDisabled .el-upload--picture-card {
  display: none;
}

.upload-container .el-upload--picture-card {
  width: 150px;
  height: 150px;
  line-height: 150px;
}

.upload-container .el-upload-list--picture-card .el-upload-list__item {
  width: 150px;
  height: 150px;
  line-height: 150px;
}
</style>