zhgh_zjvtit/target/classes/static/components/plugins/sysUpload/h5Index.vue

<template>
  <div>
    <van-uploader
        v-model="fileList"
        :before-read="beforeRead"
        :after-read="afterRead"
        :before-delete="beforeDelete"
        multiple
        progress
        :accept="accept"
        :max-count="upload_number"
        title=""
        description=""
        tip=""
    ></van-uploader>
  </div>
</template>

<script>
module.exports = {
  name: "h5Index",
  props: {
    // 上传返回id
    upload_return_id_api: {
      type: String,
      default: "/platform/sys/file/uploadLocalReturnId",
      required: false
    },
    // 上传返回url
    upload_dynamic_return_url_api: {
      type: String,
      default: "/platform/sys/file/uploadDynamicReturnUrl",
      required: false
    },
    // 当上传接口为id的情况下，配置下载接口
    upload_id_download_url: {
      type: String,
      default: "/platform/sys/file/download?id=",
      required: false
    },
    // 上传样式或图片方式 file || drag || image
    upload_mode: {
      type: String,
      default: "file",
      required: false
    },
    // 上传数量
    upload_number: {
      type: Number,
      default: 1,
      required: false
    },
    // 上传返回id或url
    upload_result_type: {
      type: String,
      default: "url",
      required: false
    },
    // 上传返回分类 数组或字符串逗号隔离 interval | array
    upload_result_category: {
      type: String,
      default: "interval",
      required: false
    },
    // 跟antdv官方一样，是否显示文件列表
    show_upload_list: {
      type: Boolean,
      default: true,
      required: false
    },
    // 跟antdv官方一样，接受上传的文件类型
    accept: {
      type: String,
      default: "",
      required: false
    },
    // 是否是完整的结果（就是文件上传返回什么，该组件返回什么，uploadResultCategory必须为array）
    complete_result: {
      type: Boolean,
      default: false,
      required: false
    },
    // 父组件传来的参数
    value: {
      type: [String, Array],
      required: false
    }
  },
  data() {
    return {
      fileList: [
        // { url: "http://localhost:8080/platform/sys/file/download?id=rn1v1efh2ag0aps59ult3ebudf", isImage: true }
      ]
    }
  },
  watch: {
    value: {
      handler: function (val) {
        if (val) {
          if (Array.isArray(val)) {
            this.fileList = val.map((v) => {
              return {
                ...v,
                status: null,
                isImage: ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(v.name.split(".").pop().toLowerCase())
              }
            })
          } else if(typeof val === "string") {
            this.fileList = [
                {
                  url: val,
                  status: null,
                  isImage: true
                }
            ]
          } else {
            val = JSON.parse(val)
            this.fileList = val.map((v) => {
              return {
                ...v,
                url: v.url ? v.url : v.response?.data,
                isImage: ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(v.name.split(".").pop().toLowerCase()),
                status: null
              }
            })
          }
        } else {
          this.fileList = []
        }
      },
      immediate: true
    }
  },
  computed: {
    action() {
      return this.upload_result_type === "id" ? this.upload_return_id_api : this.upload_dynamic_return_url_api
    }
  },
  methods: {
    beforeDelete(file) {
      this.fileList = this.fileList.filter((f) => f.url !== file.url)
      this.$emit("update:value", this.fileList)
    },
    beforeRead(file) {
      return true
    },
    afterRead(files) {
      this.fileList.map((f) => {
        if (f.file && f.file.name === files.file.name) {
          f.status = "loading"
        }
      })
      const uploadPromises = this.fileList
          .filter((f) => f.status === "loading")
          .map((f) => {
            const formData = new FormData()
            formData.append("file", f.file)
            return this.$axios.post(this.action, formData).then((resp) => {
              if (resp.code === 0) {
                f.name = f.file.name
                f.size = f.file.size
                f.status = null
                f.url = resp.data
                f.response = resp
                f.percentage = 100
                f.isImage = true
                delete f.file
                delete f.content
              } else {
                f.status = "fail"
              }
            })
          })
      Promise.all(uploadPromises)
          .then(() => {
            if (this.upload_result_category === "interval") {
            } else if (this.upload_result_category === "array") {
              if (this.complete_result) {
                this.$emit("update:value", this.fileList)
              } else {
                const resultArrayValue = []
                this.fileList.forEach((data) => {
                  resultArrayValue.push(data.response.data)
                })
                this.$emit("update:value", resultArrayValue)
              }
            }
          })
          .catch((error) => {
            console.error("所有上传请求失败:", error)
          })
    }
  },
  created() {
  }
}
</script>

<style scoped>
.van-uploader__title {
  padding-left: 0;
}

.van-uploader__wrapper {
  margin-left: 0;
}
</style>