Uploader 文件上传 APP

该方法或组件支持移动端小程序调用

PC

该方法或组件支持桌面端小程序调用

<template>
  <div class="page">
    <Uploader
      class="uploader"
      ref="uploader"
      post-action="post.action"
      accept="image/*"
      v-model="files"
      :multiple="true"
      :size="1024 * 1024 * 200"
      @input-filter="inputFilter"
      @input-file="inputFile"
      :customAction="customAction"
    >
      <span class="upload_button">
        <b><Icon type="upload" :color="['#FFFFFF']" size="xs"></Icon> 文件上传</b>
      </span>
    </Uploader>
    <ul class="file-list">
      <li class="file" v-for="(file, index) in files" :key="index">
        <div class="left">
          <Icon type="file-image-regular" :color="['#1089ff']" size="lg"></Icon>
        </div>
        <div class="middle">
          <div class="top">
            <span class="name">{{ `${file.name}` }}</span>
          </div>
          <div class="bottom">
            <span class="size"> {{ `大小：${file.size}` }}</span>
            <span class="speed"> {{ `速度：${file.speed}` }}</span>
          </div>
        </div>
        <div class="right">
          <span class="status" v-show="file.success === true">{{ file.success === true ? '成功' : '' }}</span>
          <span class="delete" @click="handleDelete(index, true)"><Icon class="icon" type="circle-xmark-solid" :color="['#cccccc']" size="md"></Icon></span>
        </div>
      </li>
    </ul>
  <div>
</template>

<script>
export default {
  name: 'uploaderExample',
  data () {
    return {
      files: [],
      uploadFiles: []
    }
  },
  watch: {
    files (val) {
      console.log(val)
    }
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // 添加文件前, 过滤系统文件 和隐藏文件
        if (/(\/|^)(Thumbs\.db|desktop\.ini|\..+)$/.test(newFile.name)) {
          return prevent();
        }
        // 过滤 php html js 文件
        if (/\.(php5?|html?|jsx?)$/i.test(newFile.name)) {
          return prevent();
        }
      }
    },
    async inputFile(newFile, oldFile) {
      if (newFile && !oldFile) {
        // add, 数据处理，添加文件后缀属性
        this.$refs.uploader.active = true;
      }
      if (newFile && oldFile) {
        // update
      }
      if (!newFile && oldFile) {
        // remove
      }
    },
    customAction (file) {
      this.$Toast.loading({
        content: '上传中...',
        duration: null,
      });
      return new Promise(resolve => {
        setTimeout(() => {
          this.$Toast.hide();
          this.$Toast.success({
            content: '上传成功',
            duration: 1.2,
            mask: false
          });
          this.$refs.uploader.update(file, {
            success: true,
            file: file.file,
            size: file.size,
            type: file.type
          });
          resolve(true);
        }, 1000);
      })
    }
  }
}
</script>