order-client-ui-pc/src/components/file-upload/main.vue

<template>
  <div>
    <input
      ref="inputer"
      :accept="accept"
      :multiple="multiple"
      class="fileUp"
      type="file"
      :disabled="disabled"
      name="file"
      @change="handleChange($event)"
    />
  </div>
</template>

<script>
import urlConfig from "@/apis/url-config";
import { get_business_companyNo, getToken } from "@/utils/auth";
import resToken from "@/mixins/resToken";
//Uploadcondition 用于判断个性化文件 //返回 false 就不会上传文件
//UploadErrorEvent 上传成功
//UploadErrorEvent 上传失败

export default {
  name: "fileUpload",
  mixins: [resToken],
  props: {
    //@reject 默认值
    accept: String, //上传文件类型
    multiple: {
      //是否可以上传多张图片
      type: Boolean,
      default: false,
    },
    disabled: {
      //是否禁用
      type: Boolean,
      default: false,
    },
    uploadcondition: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      imgAPI: urlConfig.baseURL,
    };
  },
  methods: {
    async handleChange(event) {
      // console.log(event)
      let that = this;
      let inputDOM1 = that.$refs.inputer;
      const files = inputDOM1.files;
      console.log(files);
      let length = files.length;
      if (length === 0) return;
      that.loading = that.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      for (let i = 0; i <= length; i++) {
        if (i === length) {
          this.loading.close();
          that.$refs.inputer.value = "";
        } else {
          let str = await that.httpupLoad(files, i);
          console.log(i, str);
          if (str === "error") {
            that.$emit("UploadErrorEvent");
          } else if (str === "break") {
            that.$emit("UploadErrorEvent", "break");
          } else {
            that.$emit("UploadSuccessEvent", str);
          }
        }
      }
    },
    async httpupLoad(files, i) {
      return new Promise((resolve, reject) => {
        let that = this;
        if (!this.uploadcondition(files[i])) {
          resolve("break");
        } else {
          let form = new FormData();
          form.append("image", files[i]);
          form.append("token", getToken());
          form.append("supplierNo", get_business_companyNo());
          axios
            .post(`${that.imgAPI}abutment/uploadImg`, form)
            .then((res) => {
              const { status } = res;
              if (status === 200) {
                let item = res.data;
                const { code, data } = item;
                if (code === 0) {
                  const { url, name } = data[0];
                  resolve({
                    url: `${that.imgAPI}storage/${url}`,
                    name: name,
                  });
                } else if (code >= 100 && code <= 104) {
                  resolve({
                    url: `noToken`,
                    name: "",
                  });
                } else {
                  resolve("break");
                }
              } else {
                reject();
              }
            })
            .catch((error) => {
              reject();
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.fileUp {
  opacity: 0;
  width: 100%;
  height: 100%;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  &:hover {
    cursor: pointer;
  }
}
</style>