dy-admin-manager/src/components/singe-file-upload/index.vue

<template>
  <!-- :before-upload="beforeUpload"     :headers="headers"    action="/api-web/uploadFile"-->
  <el-upload

    :action="ossUploadUrl"
    :data="dataObj"
    :on-success="success"
    :on-remove="remove"
    :on-progress="progress"
    :on-error="error"
    :file-list="filelist"
    :before-upload="beforeUpload"
    :accept="accept"
  >
    <el-button type="primary" plain>{{ buttonText }}</el-button>
    <div slot="tip" v-if="tips" class="el-upload__tip">{{ tips }}</div>
    <div slot="file" slot-scope="{ file }">
      <div
        style="
          display: flex;
          align-items: center;
          flex: 1 auto;
          justify-content: space-between;
        "
      >
        <div style="display: flex; align-items: center; overflow: hidden">
          <i
            v-if="!!file.url"
            @click.stop="copyText(file.url)"
            title="复制"
            style="padding-right: 5px"
            class="el-icon-document-copy"
          ></i>
          <span class="upload-text" :title="file.url">{{ file.url }}</span>
        </div>
        <i v-if="!!file.url" class="el-icon-delete" @click="remove"></i>
      </div>
    </div>
  </el-upload>
</template>

<script>
import copy from "copy-to-clipboard";
import { getToken } from "@/utils/auth";
import load from "@/utils/loading";
import { policy } from "@/api/appTenant";
export default {
  name: "singe-file-upload",
  props: {
    buttonText: {
      type: String,
      default: "点击上传",
    },
    tips: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "",
    },
    accept: {
      type: String,
      default: "",
    },
    bucket_name: {
      type: String,
      default: "daya",
    },
  },
  watch: {
    value: {
      handler() {
        if (this.value) {
          this.filelist = [
            {
              name: this.value,
              url: this.value,
            },
          ];
        } else {
          this.remove();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      filelist: [],
      headers: {
        Authorization: getToken(),
      },
      ossUploadUrl: "https://ks3-cn-beijing.ksyuncs.com/" + this.bucket_name,
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        KSSAccessKeyId: "",
        // dir: "",
        acl: "public-read",
        name: "",
        // bucket_name: props.bucket_name
      },
    };
  },
  methods: {
    remove() {
      this.filelist = [];
      this.$emit("update:value", "");
      this.$emit("input", "");
    },
    error() {
      this.remove();
      load.endLoading();
    },
    // beforeUpload(file) {
    //   console.log(file)

    //   return false
    // },
    progress(file) {
      load.startLoading();
    },
    success(res, file) {
      load.endLoading();
       let url = this.ossUploadUrl + '/' + this.dataObj.key
      if (url) {
        this.filelist = [
          {
            name: url,
            url: url,
          },
        ];
        this.$emit("update:value",url);
        this.$emit("input", url);
        this.$emit("inputFile", file);
        this.$emit('success')
        // val.data.name

       let res= {
        data:{
          name:this.dataObj.name
        }
       }
        this.$emit("getName", res);
      } else {
        this.remove();
        this.$message.error(res.msg || "上传失败");
      }
    },
    copyText(text) {
      if (text) {
        copy(text);
        this.$message.success("复制成功");
      }
    },
    async beforeUpload(file) {
      // let fileName = file.name.replaceAll(" ", "_");
      // let key = new Date().getTime() + fileName;
      // let obj = {
      //   filename: fileName,
      //   bucketName: props.bucket_name,
      //   postData: {
      //     filename: fileName,
      //     acl: "public-read",
      //     key: key,
      //     unknowValueField: [],
      //   },
      // };

      try {
        let fileName = file.name.replaceAll(" ", "_");
        let key = new Date().getTime() + fileName;
        let obj = {
          filename: fileName,
          bucketName: this.bucket_name,
          postData: {
            filename: fileName,
            acl: "public-read",
            key: key,
            unknowValueField: [],
          },
        };

        const res = await policy(obj);
        this.dataObj = {
          policy: res.data.policy,
          signature: res.data.signature,
          key: key,
          KSSAccessKeyId: res.data.kssAccessKeyId,
          // dir: "",
          acl: "public-read",
          name: fileName,
          // bucket_name: props.bucket_name
        };
      } catch (e) {
        console.log(e)
      }
    },
  },
};
</script>

<style lang="less" scoped>
.upload-text {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>