a-upload文件上传

通过自定义函数解决调用a-upload的onsuccess函数无效的问题

---

一、a-upload

a-upload组件总览

二、使用

1.场景

不需要保存上传的文件，后台解析文件转为对象的各个属性并插入数据库，需要在文件上传时显示上传进度，不需要显示文件列表，需要在上传完成文件后刷新当前页面，加载新插入的数据。但是调用onsuccess函数无效。解决方法：通过自定义函数覆盖默认的上传行为。

2.代码

a-upload代码如下：

 <a-upload name="file"  :multiple="false" :fileList="fileList" :customRequest="customUpload" >
    <a-button type="primary" icon="import">数据导入</a-button>
    <a-progress :percent="percent" v-if="percent>0" size="small" :stroke-color="{'0%':'#108ee9', '100%': '#108ee9',}" />
</a-upload>

其中customUpload用来自定义上传实现。

实现如下：

customUpload(info){
  const  uploadApi = ({ file, onUploadProgress }) => {
    const formData = new FormData();
    formData.append('file', file);
    return axios({
      url: this.url.importExcelUrl,
      method: 'POST',
      data: formData,
      headers: {
        'Content-type': 'multipart/form-data',
      },
      onUploadProgress, // 上传进度回调函数 
    });
  };
  uploadApi({
    file: info.file,
    onUploadProgress: (ev) => {
      this.percent = (ev.loaded / ev.total) * 100;
    },
  }).then((res) => {
      this.loadData()
      this.percent=0
    }).catch((err) => {
      info.onError(err);
    });
},

其中process用来存储进度条的进度，因为在上传完成后需要进度条隐藏，所以重置为0，并且在使用a-process组件时添加if判断，由此动态显示隐藏。

注意，需要引入axios

import { axios } from '@/utils/request'

3.Java代码

@RequestMapping(value = "/upload", method = RequestMethod.POST)
public Result<?> uploadModel(HttpServletRequest request, HttpServletResponse response) throws IOException {
    //转换request，解析对象
    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
    Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
    for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
        MultipartFile file = entity.getValue();// 获取上传文件对象
        XSSFWorkbook wb = new XSSFWorkbook(file.getInputStream());// 创建workbook
        Sheet xssfSheet = wb.getSheetAt(0);//取sheet0，第一页工作表
		Order order=new Order();
        List<OrderDetail> detailList = new ArrayList<>();
        //循环取每行的数据
        for (int rowIndex = 0; rowIndex < xssfSheet.getPhysicalNumberOfRows(); rowIndex++) {
			XSSFRow xssfRow = ((XSSFSheet) xssfSheet).getRow(rowIndex);
			if (xssfRow == null ) {
                break;
            }
            //第一行为表单名称，行数是从0开始，根据表单定义逻辑，第三行是详细信息表头
			if(rowIndex == 0 ||  rowIndex == 2){
				continue;
			}
            if(rowIndex ==1){//第二行处理
                for (int cellIndex = 0; cellIndex < xssfRow.getPhysicalNumberOfCells(); cellIndex++) {
                    XSSFCell cell=xssfRow.getCell(cellIndex);
                    if(cellIndex==1){
                        order.setCustomerName(cell.getStringCellValue());
                    }if(cellIndex==3){
                        //转换字典值
                        List<DictModel> projects=sysDictService.queryDictItemsByCode("project");
                        for (DictModel model : projects) {
                           if(model.getText().equals(cell.getStringCellValue())) {
                               order.setProjectName(model.getValue());
                           }
                        }
                    }else if(cellIndex==6){
                        order.setProjectKind(cell.getStringCellValue());
                    }
                }
            }else{//详细信息
                OrderDetail detail=new OrderDetail();
                CellType type=xssfRow.getCell(0).getCachedFormulaResultType();
                if(type.equals(CellType.NUMERIC)){//第一列是行号，当不是NUMERIC说明解析结束
					//解析数据，自定义处理逻辑
                    detail.setName(xssfRow.getCell(1).getStringCellValue());
                    detailList.add(detail);
                }else{
                    break;
                }
            }
        }
        if(detailList.size()==0){
            return Result.error("请填写订单详细信息");
        }
    }
    return Result.ok("数据上传成功");
}

​​​​​​​