uniapp上传excel文件

1.前端

使用插件：https://uniapp.dcloud.net.cn/component/uniui/uni-file-picker.html

<uni-file-picker
    v-model="fileName"
    file-extname="xls,xlsx"
    limit="1"
    file-mediatype="all"
    title="请上传Excel文件"
    :list-styles="listStyles"
    @select="upLoadExcelFile"
    >
    <button class="btn"></button>
</uni-file-picker>

const upLoadExcelFile = (e) => {
    uni.uploadFile({
        url: config.BASE_URL + '/platformExcel/upExcelFile?storeId=' + useUserMain.storeId,
        filePath: e.tempFilePaths[0],
        name: 'file',
        success: function (res) {
            console.log(res);
            var jsonObject = JSON.parse(res.data);
            showToastText(jsonObject.data);
        },
        fail: function (e) {
            console.log(e);
            showToastText(e);
        }
    });
};

原生，直接方法调用

// 选择文件
uni.chooseImage({
  count: 1,
  success: function(res) {
    var tempFilePaths = res.tempFilePaths;
    
    // 上传文件
    uni.uploadFile({
      url: 'http://example.com/upload',
      filePath: tempFilePaths[0],
      name: 'file',
      header: {
        'content-type' : 'multipart/form-data'
      },
      formData:{
        'user': 'test'
      },
      success: function(res){
        console.log(res.data);
      },
      fail: function(res){
        console.log(res);
      }
    });
  }
});

 

2.后端

easyExcel：https://easyexcel.opensource.alibaba.com/docs/current/

导入依赖

 <!--excel-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>easyexcel</artifactId>
            <version>3.1.0</version>
            <exclusions>
                <exclusion>
                    <artifactId>poi-ooxml-schemas</artifactId>
                    <groupId>org.apache.poi</groupId>
                </exclusion>
                <exclusion>
                    <groupId>org.apache.poi</groupId>
                    <artifactId>poi-ooxml</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>4.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>4.1.2</version>
        </dependency>

创建与excel表字段对应的实体

@EqualsAndHashCode(callSuper = false)
@Data
public class ExcelModel {
    @ExcelProperty(value = "姓名")
    String userName;
    @ExcelProperty(value = "性别")
    String sex;
    @ExcelProperty(value = "年龄")
    Integer age;
    @ExcelProperty(value = "电话")
    String phone;
}

创建读取数据监听器

@Slf4j
public class ExcelReadListener implements ReadListener<ExcelModel> {

    List<ExcelModel> list = new ArrayList<>();

    private PlatformClientService platformClientService; // 需要执行插入语句sql的服务// 由于监听器没有被spring托管，无法在spring中注入，所有无法直接使用bean,可以通过构造方法在新建监听器是传入bean
    public ExcelReadListener(PlatformClientService platformClientService) {
        this.platformClientService = platformClientService;
    }

    /**
     * 每读一行触发一次
     */
    @Override
    public void invoke(ExcelModel excelModel, AnalysisContext analysisContext) {
        log.info("读取信息：{}", excelModel);
        if (excelModel.getUserName() != null) { // 防止插入空数据
            list.add(excelModel); // 将读取的信息保存
        }

    }

    /**
     * 全部读取完后触发
     */
    @Override
    public void doAfterAllAnalysed(AnalysisContext analysisContext) {
        log.info("-----------读取完毕-----------");
        // 将读取的数据保存到数据库
        for (ExcelModel excelModel : list) {
            log.info("保存信息：{}", excelModel );
        }
        log.info("-----------插入完毕-----------");
    }
}

创建接口

 @ApiOperation("上传excel文件")
    @PostMapping("/upExcelFile")
    public R<String> upExcelFile(@RequestParam("file") MultipartFile file)
        throws IOException {
        // 1.读取文件流
        InputStream is = file.getInputStream();
        // 2.创建一个读取监听器
        ExcelReadListener listener = new ExcelReadListener(platformClientService);

        EasyExcel.read(is, ExcelModel.class, listener).sheet(0)// 读取第几个工作表
            .headRowNumber(1)// 列头占几行
            .doRead();

        return R.ok("文件上传成功！");
    }