Ant Design Vue 修改a-upload-dragger 上传状态

1,017 阅读1分钟
<a-upload-dragger
    name="file"
    accept=".xls,.xlsx"
    :multiple="true"
    action=""
    :customRequest="importData"
    @change="handleChange"//修改上传状态
    >
   <p class="ant-upload-drag-icon">
       <img src="../../../../assets/image/upfile_icon.png" alt="" />
   </p>
       <p class="ant-upload-text" style="color: rgba(205, 240, 243, 0.85)">
        点击或将文件拖拽到这里上传
       </p>
       <p class="ant-upload-hint" style="color: rgba(205, 240, 243, 0.45)">
        支持扩展名:.xlsx 或 .xls
       </p>
</a-upload-dragger>
 methods:{
    handleChange(info){
      info.file.status = 'done'
    }
        // 数据导入
    importData(item) {
      if (item.file.name === undefined) {
        this.$message({ type: "warning", message: "请选择文件" });
        return;
      }
      const extension = item.file.name.substring(
        item.file.name.lastIndexOf(".") + 1
      );
      const size = item.file.size / 1024 / 1024;
      this.filesize = size;
      if (extension !== "xlsx" && extension !== "xls") {
        this.$message({ type: "warning", message: "请选择xlsx或xls文件" });
        return;
      }
      if (size > 3) {
        this.$message({ type: "warning", message: "文件不能大于3M" });
        return;
      }
    },
}