ant design 上传（a-upload）excel_a-upload 支持doc、xls上传格式-优快云博客

本文链接：https://blog.youkuaiyun.com/rt2016/article/details/122302232

本文介绍了使用Ant Design的a-upload组件实现Excel上传的功能，详细展示了代码实现过程，欢迎读者提出建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近老是有导入excel的功能，现在有空就来整理一下，欢迎大家提意见。
直接上代码：

 <a-upload style="display: inline-block;"
                :accept="UPLOAD_FILE_SUFFIX"
                name="file"
                :multiple="false"
                :fileList= fileList
                :beforeUpload="beforeUpload"
                @change="handleChange()"
                >
                <a-icon :component="importIcon" style="margin-top:5px;" />导入
              </a-upload>

/**
     * 上传文件前的回调，只允许上传word或者pdf格式的文件
     */
    beforeUpload(file){
		//文件类型判断
			if( file.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || file.type == "application/vnd.ms-excel"){
				//只允许上传excel格式的文件
        this.fileTypeBool = true;
        let formData = new FormData();
        formData.append('file', file);
		//请求接口
        readPendingExcel(formData).then((res) => {

        }).catch(err => {
            this.getMaterialList(err.data);
            this.$message.success("导入成功");
        });

	}else{
		this.$message.error('请选择表格类型文件！');
		this.fileTypeBool = false;
	}
	//文件大小判断
	//const isLt2M = file.size / 1024 / 1024 <= 10
	 //if (!isLt2M) {
	//	this.$message.error('文件大小不超过10M！');
	//	this.fileSizeBool = false;
	// }else{
	//	this.fileSizeBool = true;
	 //}
    },
	 getMaterialList(list) {
        let arr = list.map(item => {
          return {
            singleProjectId: this.record.id,
            name: item["name"],
            sex: item["sex"],
            age: item["age"],
            unit: item["unit"],//单位
            number: item["number"],//数量
            status: item["status"] //数据是否正确状态
          }
        });
        
        this.tableData = arr;//渲染表格数据
      },

一顿乱操作，就出来想要的结果了。