<template>
  <div>
    <table>
      <tr>
        <td>
          <hive-upload v-bind="uploadOption" style="width:140px;">
            <hive-button style="width:140px;">
              <hive-icon icon="eject"/>主按钮
            </hive-button>
          </hive-upload>
        </td>
        <td width="10"></td>
        <td valign="top">
          <div :style="{ lineHeight: '40px', marginLeft: 16, opacity: 0.4 }">
            <span>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</span>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        uploadOption: {
          accept: '.png,.jpg',
          url: '//jsonplaceholder.typicode.com/posts/',
          limit: 4,
          multiple: true,
          formData: {
            text: 'test',
          },
          fileList: [
            {
              /**
               * key值
               */
              key: 1534333090331,
              /**
               * 文件名
               */
              name: '1-水电费水电费的副本.txt',
              /**
               * 文件状态 成功-done 上传中-loading 失败-error
               */
              status: 'done',
              /**
               * 文件对象
               */
              file: null,
              /**
               * 上传进度
               */
              progress: 80,
            },
            {
              /**
               * key值
               */
              key: 1534333090332,
              /**
               * 文件名
               */
              name: '1-水电费水电费的副本.txt',
              /**
               * 文件状态 成功-done 上传中-loading 失败-error
               */
              status: 'error',
              /**
               * 文件对象
               */
              file: null,
              /**
               * 上传进度
               */
              progress: 0,
            },
            {
              /**
               * key值
               */
              key: 1534333090333,
              /**
               * 文件名
               */
              name: '1-水电费水电费的副本.txt',
              /**
               * 文件状态 成功-done 上传中-loading 失败-error
               */
              status: 'loading',
              /**
               * 文件对象
               */
              file: null,
              /**
               * 上传进度
               */
              progress: 80,
            },
          ],
          onChange: function(list) {
            console.log(list);
          },
          onUploadError(e) {
            console.log(e);
          },
          onUploadProgress(file, response) {
            var progress = response.loaded / response.total;
            console.log(progress);
          },
        },
      };
    },
    methods: {},
  };
</script>
