aurora-admin/frameworks-mobile/Upload.vue2.vue

<template>
  <div class="kole-m-upload" :class="rootClass">
    <div class="kole-m-upload__header">
      <span class="kole-m-upload__title">{{ title }}</span>
      <span class="kole-m-upload__count">{{ files.length }} / {{ maxCount }}</span>
    </div>

    <button
      class="kole-m-upload__trigger"
      type="button"
      :disabled="disabled || full"
      :aria-disabled="disabled || full ? 'true' : null"
      @click="onSelectClick"
    >＋ 选择文件</button>

    <ul v-if="files.length" class="kole-m-upload__list">
      <li
        v-for="(file, i) in files"
        :key="file && file.uid ? file.uid : (file && file.name ? file.name : i) + '-' + i"
        class="kole-m-upload__item"
        :class="'is-' + statusOf(file)"
        :style="{ '--kole-m-upload-percent': percentOf(file) + '%' }"
      >
        <span class="kole-m-upload__thumb" aria-hidden="true">{{ extOf(file) }}</span>
        <span class="kole-m-upload__body">
          <span class="kole-m-upload__name">{{ nameOf(file) }}</span>
          <span class="kole-m-upload__meta">
            <span
              class="kole-m-upload__track"
              role="progressbar"
              aria-valuemin="0"
              aria-valuemax="100"
              :aria-valuenow="percentOf(file)"
              :aria-label="nameOf(file) + ' 上传进度'"
            >
              <span class="kole-m-upload__bar"></span>
            </span>
            <span class="kole-m-upload__status">
              {{ statusOf(file) === 'uploading' ? percentOf(file) + '%' : statusText(file) }}
            </span>
          </span>
        </span>
        <span class="kole-m-upload__actions">
          <button
            v-if="statusOf(file) === 'error'"
            class="kole-m-upload__action"
            type="button"
            :disabled="disabled"
            :aria-label="'重试 ' + nameOf(file)"
            @click="onRetryClick(i)"
          >重试</button>
          <button
            class="kole-m-upload__action kole-m-upload__action--remove"
            type="button"
            :disabled="disabled"
            :aria-label="'删除 ' + nameOf(file)"
            @click="onRemoveClick(i)"
          >删除</button>
        </span>
      </li>
    </ul>
    <p v-else class="kole-m-upload__empty">{{ emptyText }}</p>

    <input
      class="kole-m-upload__native"
      type="file"
      multiple
      :accept="accept"
      tabindex="-1"
      aria-hidden="true"
    >
    <slot></slot>
  </div>
</template>

<script>
/* 上传（移动端）— 规格 §46。
   结构：header（标题 + 计数）> trigger（选择触发器）> list（文件行）+ empty。
   移动端没有拖拽：选择动作只能是点一下触发器（规格 §46.1），因此触发器是唯一入口。
   **本组件不发请求**：进度与成败全部由宿主回传（file.status / file.percent），
   组件只做四态呈现与删除 / 重试的动作回传（规格 §46.7）。
   file.status 取值：'pending'（待上传）/ 'uploading'（上传中）/ 'success'（成功）/ 'error'（失败）。 */

var STATUS_TEXT = {
  pending: '待上传',
  uploading: '上传中',
  success: '已上传',
  error: '上传失败'
};

function statusOf(file) {
  var s = file && file.status ? String(file.status) : 'pending';
  return STATUS_TEXT[s] ? s : 'pending';
}

function statusText(file) {
  return STATUS_TEXT[statusOf(file)];
}

function percentOf(file) {
  var n = file && typeof file.percent === 'number' ? file.percent : 0;
  return Math.max(0, Math.min(100, Math.round(n)));
}

function nameOf(file) {
  return file && file.name ? String(file.name) : '未命名文件';
}

function extOf(file) {
  var hit = nameOf(file).match(/\.([a-z0-9]+)$/i);
  return hit ? hit[1].toLowerCase() : 'file';
}

export default {
  name: 'KoleMUpload',
  props: {
    files: { type: Array, default: function () { return []; } },
    maxCount: { type: Number, default: 9 },
    disabled: { type: Boolean, default: false },
    variant: { type: String, default: 'dashed' },
    title: { type: String, default: '附件' },
    emptyText: { type: String, default: '还没有上传文件' },
    accept: { type: String, default: '' }
  },
  computed: {
    full: function () {
      return this.files.length >= this.maxCount;
    },
    rootClass: function () {
      return [
        'kole-m-upload--' + (this.variant === 'button' ? 'button' : 'dashed'),
        this.full ? 'kole-m-upload--full' : '',
        this.disabled ? 'is-disabled' : ''
      ].filter(Boolean);
    }
  },
  methods: {
    statusOf: statusOf,
    statusText: statusText,
    percentOf: percentOf,
    nameOf: nameOf,
    extOf: extOf,
    onSelectClick: function () {
      if (this.disabled || this.full) return;
      this.$emit('select');
    },
    onRemoveClick: function (i) {
      if (this.disabled) return;
      this.$emit('remove', i);
    },
    onRetryClick: function (i) {
      if (this.disabled) return;
      this.$emit('retry', i);
    }
  }
};
</script>

<style src="./Upload.css"></style>