ant design 上传（a-upload）excel

关注

原创最新推荐文章于 2026-03-05 00:38:27 发布 3.8k 阅读 AI 写同款· GEO 优化 ›

ant design pro 关于upload组件的那些事前情背景：要求用ant design pro 框架做导入导出功能，然后开始绞尽脑汁，前前后后折磨了我几个星期。导出json文件问题背景：我当时脑子一片浆糊，完全不知道用这个框架咋下手，然后就先收集资料，看看别人完成的导出功能是怎样完成的。一开始我想的是导出json格式的文件，但是我收集到的资料，大部分成功的只是导出excel文件(虽然之前我有成功导出过text文件，但是因为这次的文件内容不适合用所以没有用text)。所以我一开始尝试的是导出excel格式的文件，虽然很艰辛的成功了，但很麻烦，就是代. 阅读详情

最近老是有导入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;//渲染表格数据
      },

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