<template>
  <div>
    <ui-group title="自动上传">
      <ui-cell>
        <ui-uploader
          slot="after-title"
          :action="action"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-progress="onProgress"
          :on-success="onSuccess"
          :on-error="onError"
          :on-exceed="handleExceed"
          :limit="5"
          multiple>
        </ui-uploader>
      </ui-cell>
    </ui-group>
    <ui-group title="手动上传">
      <ui-cell>
        <ui-uploader
          ref="uploader"
          slot="after-title"
          :action="action"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-progress="onProgress"
          :on-success="onSuccess"
          :on-error="onError"
          :on-exceed="handleExceed"
          :auto-upload="false"
          multiple>
        </ui-uploader>
      </ui-cell>
      <ui-cell>
        <ui-button slot="after-title" @click="uploadfile">上传</ui-button>
      </ui-cell>
    </ui-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      action: '/upload',
    };
  },
  methods: {
    uploadfile() {
      this.$refs.uploader.submit();
    },
    onProgress(a) {
      console.log(a, 'onProgress');
    },
    onSuccess(a) {
      console.log(a, 'onSuccess');
    },
    onError(a) {
      console.log(a, 'onError');
    },
    handleRemove(file, fileList) {
      console.log(file, fileList, 'handleRemove');
    },
    handlePreview(file) {
      console.log(file, 'handlePreview');
    },
    handleExceed(files) {
      console.log(files, 'handleExceed');
    },
    beforeRemove(file) {
      console.log(file, 'beforeRemove');
    },
  },
};
</script>
