<!--
 * @Author: Devin
 * @Date: 2023-02-20 16:02:47
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-20 17:55:34
 * @Description: 
-->
<template>
  <el-row class="upload-demo">
    <el-col :span="8">
      <h5>异步上传</h5>
      <common-upload
        ref="commonupload1"
        :upload-attr="uploadAttr"
        :upload-label="'上传文件'"
        :file-tip="'只能上传 excel/xls/pdf/word 文件,且不超过 20M'"
      ></common-upload>

      <el-button @click.stop="handelClick">确认上传</el-button>
    </el-col>
    <el-col :span="8">
      <common-upload
        ref="commonupload2"
        :upload-attr="uploadAttr2"
        :upload-label="'上传图片'"
        :file-type="'image'"
      ></common-upload>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const uploadAttr = ref<any>({
  action: 'https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15',
  autoUpload: false,
  accept: '.doc,.docx,.xml,.pdf,.xlsx'
});

const uploadAttr2 = ref<any>({
  action: 'https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15',
  accept: 'image/*'
});
const commonupload1 = ref<any>(null);

//
function handelClick() {
  console.log();
  commonupload1.value.uploadRef.submit();
}
</script>

<style scoped lang="scss">
.upload-demo {
  padding: 20px;
}
</style>