mteacher/src/components/MUpload.vue

<template>
  <div class="m-upload">
    <van-uploader v-if="!cropper" v-model="list" :preview-full-image="false" :preview-image="previewImage" :deletable="deletable" :before-read="beforeRead" :after-read="afterRead" class="muploader" accept="image/*">
      <slot name="default"></slot>
    </van-uploader>

    <div class="mcropper" v-if="cropper">
      <div class="mcropperSection" v-if="previewImage">
        <van-image v-if="value || defaultImg" fit="cover" position="center" class="uploadImg" :src="value || defaultImg" />
        <van-icon v-else name="photograph" size="32" />
      </div>
      <slot name="default"></slot>

      <MCropper v-if="cropper" :option="options" @getFile="getFile" />
    </div>
  </div>
</template>

<script>
import MCropper from "@/components/MCropper";
import { getUploadSign, onOnlyFileUpload } from "@/helpers/oss-file-upload";
export default {
  name: "m-upload",
  components: { MCropper },
  props: {
    value: String,
    cropper: Boolean,
    deletable: Boolean,
    defaultImg: String,
    previewImage: {
      type: Boolean,
      default: true,
    },
    options: Object,
  },
  data() {
    return {
      fileUrl: this.value,
      list: this.value ? [{ url: this.value }] : [],
    };
  },
  methods: {
    beforeRead(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isLt2M) {
        this.$toast("图片大小不能超过 5MB");
        return false;
      }
      // if (name && name == "file") {
      //   let arr = ["psd", "ai", "eps", "svg", "sketch"];
      //   let typeArr = file.name.split(".");
      //   let type = typeArr[typeArr.length - 1];
      //   if (arr.indexOf(type) == -1) {
      //     this.$toast("请上传正确的文件");
      //     return false;
      //   }
      // }
      return true;
    },
    async afterRead(file) {
      try {
        file.status = "uploading";
        file.message = "";
        let tempName = file.file.name || "";
        const fileName = tempName && tempName.replace(/ /gi, "_");
        let key = new Date().getTime() + fileName;
        let objTemp = {
          filename: key,
          bucketName: "gym",
          postData: {
            filename: key,
            acl: "public-read",
            key: key,
            unknowValueField: [],
          },
        };

        const res = await getUploadSign(objTemp);
        const obj = {
          policy: res.data.policy,
          signature: res.data.signature,
          key: key,
          KSSAccessKeyId: res.data.kssAccessKeyId,
          acl: "public-read",
          name: key,
          file: file.file,
        };
        const uploadUrl = await onOnlyFileUpload(this.ossUploadUrl, obj);
        file.status = "done";
        this.fileUrl = uploadUrl;
        this.$emit("input", uploadUrl);
      } catch (e) {
        //
        file.status = "failed";
        file.message = "上传失败";
        this.list[origin] = [];
        this.fileUrl = "";
        return false;
      }
    },
    async getFile(file) {
      let tempName = file.name || "";
      const fileName = tempName && tempName.replace(/ /gi, "_");
      let key = new Date().getTime() + fileName;
      let objTemp = {
        filename: key,
        bucketName: "gym",
        postData: {
          filename: key,
          acl: "public-read",
          key: key,
          unknowValueField: [],
        },
      };

      const res = await getUploadSign(objTemp);
      const obj = {
        policy: res.data.policy,
        signature: res.data.signature,
        key: key,
        KSSAccessKeyId: res.data.kssAccessKeyId,
        acl: "public-read",
        name: key,
        file: file,
      };
      const uploadUrl = await onOnlyFileUpload(this.ossUploadUrl, obj);
      this.$emit("input", uploadUrl);
    },
  },
};
</script>

<style lang="less">
.mcropper {
  position: relative;
  .mcropperSection {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 80px;
    height: 80px;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }

  .cropper {
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   right: 0;
    //   bottom: 0;
    z-index: 9;
    position: relative;
  }
}
</style>