KnockOut+TypeScript+上传图片（oos功能）以及导入Excel文件（oos功能）并回显插入

没有看过oos配置的可以参考我的另一边文章oos配置

废话不多说，上正文

一：上传图片

1.前端：

 <div class="gift-form"><label><span>*</span> 上传图片：</label><div class="file-box" data-bind="value: image"><a href="javascript:;" class="a-upload"><input class="clickable custom-file-input" type="file" multiple="multiple" id="picture_upload" accept="image/jpeg, image/jpg, image/png"data-bind="event: {change: function(){return $root.addGiftPicture()}}" >上传图片</a></div></div><div class="row-info"><div  class="form-group" id="companyLogo" data-bind="visible: $root.isPreview"><label>预览</label></div></div>

2.TypeScript：

     /*** 添加礼品图片 添加*/addGiftPicture = () => {let giftInfo = this.giftInfo();// @ts-ignorelet file = $('#picture_upload')[0].files[0];//获得图片const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {let fileName = file.name;let fileType = file.type;let fileData = reader.result as string;//调用方法CnUserGiftService.uploadGiftPicture(fileName, fileType, fileData).done(ret => {if (ret.uploadType) {giftInfo.image = ret.logoUrl;//赋值到表单中//预览回显const img = new Image();// @ts-ignoreimg.src = reader.result;img.className = 'company_temp_img';$(".company_temp_img").remove();$("#companyLogo").append(img);this.isPreview(true);} else {Notice.error('上传失败!');}});}}

ajax

    /***上传图片*/static uploadGiftPicture(fileName: any, fileType: any, fileData: string) {return Ajax.post('/cn-user/upload-gift-picture.json', {fileName, fileType, fileData});}

3.后台控制层：

    /*** 上传图片*/public String uploadGiftPicture() {Map<String, Object> result = new HashMap<>();var req = readJson();var fileData = req.get("fileData").toString();var fileType = req.get("fileType").toString();var fileName = req.get("fileName").toString();var fileMap = Map.of("fileData", fileData,"fileType", fileType,"fileName", fileName);result = cnUserGiftManagerService.uploadGiftPicture(fileMap);writeJson(result);return null;}

Service:

/*** 上传图片*/@Overridepublic Map uploadGiftPicture(Map fileMap) {var uploadType = false;var file = fileMap.get("fileData").toString();var fileName = fileMap.get("fileName").toString();if (file.startsWith("data:")) {file = file.substring(file.indexOf(',') + 1);}file = StringUtils.replaceEach(file, new String[]{"\n", "\r"}, new String[]{"", ""}).trim();byte[] bytes = Base64.getDecoder().decode(file);var now = LocalDateTime.now();var uploadRoot = "user/gift-picture/" + DateTimeFormatter.ofPattern("yyyy-MM").format(now) + "/";var timeKey = DateTimeFormatter.ofPattern("yyyyMMddHHmmss").format(now) + "-" + RandomStringUtils.randomAlphanumeric(6);var formatName = fileUtils.getImageFormatName(bytes, FORMAT_JPG);//获取图片尾缀var filename = "logo-" + timeKey + "." + formatName;uploadType = ossHelper.put(uploadRoot + filename, bytes);var resultMap = Map.of("uploadType", uploadType,"logoUrl", uploadRoot + filename);return resultMap;}

4.从OOS中读取并回显

//oos读取字节流
byte[] bytes = ossHelper.get(item.getImage());
//字节流转换为base64 传到前台
base64Img =Base64.getEncoder().encodeToString(bytes);

前台显示：

<%--图片的二种显示方式 http链接 和 oos链接--%>
<td ><!-- ko if: imageState == 'httpUrl' --><img data-bind="attr: { src: image}" width="55px" height="55px"/><!-- /ko --><!-- ko if: imageState == 'oosUrl' --><img data-bind="attr: { src: 'data:image/png;base64,'+imageBytes}" width="55px" height="55px"/><!-- /ko -->
</td>

里面所涉及的工具类都在oos配置当中

二：导入EXCEL文件

1.前端

<div class="gift-form" id="volumeSize" data-bind="visible: $root.volumeSizeState"><label><span>*</span> 上传券码：</label><div class="file-box"><a href="javascript:;" class="a-upload"><input type="file" id="compound_upload" data-bind="event: {change: function(){return $root.uploadGiftFile($('#compound_upload')[0].files[0])}}" accept=".xls, .xlsx">上传券码</a></div>
</div>

2.Ts

  /*** 上传文件 添加*/uploadGiftFile = () => {let giftInfo = this.giftInfo();// @ts-ignorelet file = $('#compound_upload')[0].files[0];//获得文件if (file == null) {Notice.error('请上传文件！');return;}if (/(?:.xls|.xlsx)$/.test(file.type)) {Notice.error('文件格式不正确！');return false;}if (file.name.length > 50) {Notice.error('文件名命名过长！');return false;}const reader = new FileReader();reader.onload = () => {let fileName = file.name;let fileType = file.type;let fileData = reader.result as string;CnUserGiftService.uploadGiftFile(fileName, fileType, fileData).done(ret => {if (ret.uploadType) {giftInfo.fileUrl = ret.excelUrl;//赋值到表单中Notice.error('导入成功!');} else {Notice.error('上传失败!');}})}reader.readAsDataURL(file);}

ajax

/***上传文件*/static uploadGiftFile(fileName: any, fileType: any, fileData: string) {return Ajax.post('/cn-user/upload-gift-file.json', {fileName, fileType, fileData});}

3.后台：存入OOS
控制层

/*** 上传file Excel*/public String uploadGiftFile() {Map<String, Object> result = new HashMap<>();var req = readJson();var fileData = req.get("fileData").toString();var fileType = req.get("fileType").toString();var fileName = req.get("fileName").toString();var fileMap = Map.of("fileData", fileData,"fileType", fileType,"fileName", fileName);result = cnUserGiftManagerService.uploadGiftFile(fileMap);writeJson(result);return null;}

Service

    /*** 上传文件*/@Overridepublic Map uploadGiftFile(Map fileMap) {var uploadType = false;var file = fileMap.get("fileData").toString();var fileName = fileMap.get("fileName").toString();if (file.startsWith("data:")) {file = file.substring(file.indexOf(',') + 1);}file = StringUtils.replaceEach(file, new String[]{"\n", "\r"}, new String[]{"", ""}).trim();byte[] bytes = Base64.getDecoder().decode(file);var now = LocalDateTime.now();var uploadRoot = "user/upload-gift-file/" + DateTimeFormatter.ofPattern("yyyy-MM").format(now) + "/";var timeKey = DateTimeFormatter.ofPattern("yyyyMMddHHmmss").format(now) + "-" + RandomStringUtils.randomAlphanumeric(6);var formatName = fileUtils.getFileTypeByStream(bytes, fileName);//获取文件尾缀var filename = timeKey + "." + formatName;uploadType = ossHelper.put(uploadRoot + filename, bytes);var resultMap = Map.of("uploadType", uploadType,"excelUrl", uploadRoot + filename);return resultMap;}

成功存入到oos中

4.从OOS中读取EXCEL文件并插入数据库

var result = new HashMap<String, Object>();
result.put("success", 0);
// 从OOS中根据路径获得流文件
byte[] bs = ossHelper.get(newCode);
if (bs == null) {result.put("error", "文件上传失败！");writeJson(result);return null;
} else {//读取流InputStream stream = new ByteArrayInputStream(bs);XSSFWorkbook workbook = null;try {workbook = new XSSFWorkbook(stream);} catch (IOException e) {e.printStackTrace();}XSSFSheet sheet = workbook.getSheetAt(0);//判断条数int rows = sheet.getPhysicalNumberOfRows();if (rows > 1000) {result.put("error", "文档记录超过了1000条，请拆分文档！");writeJson(result);return null;}//操作excel文件XSSFRow row1 = sheet.getRow(0);if (row1 == null) {result.put("error", "上传的文档中没有内容！");writeJson(result);return null;}int cells = row1.getPhysicalNumberOfCells();//标题不能为空if (row1.getCell(0) != null && row1.getCell(1) != null && row1.getCell(2) != null && cells == 3) {//对比if (StringUtils.equalsIgnoreCase(row1.getCell(0).getStringCellValue(), "礼品编号")&& StringUtils.equalsIgnoreCase(row1.getCell(1).getStringCellValue(), "兑换码")&& StringUtils.equalsIgnoreCase(row1.getCell(2).getStringCellValue(), "过期时间")) {//遍历取值 进行赋值for (int j = 1; j < rows; j++) {XSSFRow row = sheet.getRow(j);CnUserGiftRedeemCode cnUserGiftRedeemCode = new CnUserGiftRedeemCode();if (row != null) {if (row.getCell(0) != null) {//行赋值if (StringUtils.isNotBlank(fileUtils.getXSSFCellValue(row.getCell(0)))) {cnUserGiftRedeemCode.setGiftId(Integer.valueOf(fileUtils.getXSSFCellValue(row.getCell(0))));}if (StringUtils.isNotBlank(fileUtils.getXSSFCellValue(row.getCell(1)))) {cnUserGiftRedeemCode.setCode1(fileUtils.getXSSFCellValue(row.getCell(1)));}if (StringUtils.isNotBlank(fileUtils.getXSSFCellValue(row.getCell(2)))) {//处理日期数字Calendar calendar = new GregorianCalendar(1900, 0, -1);Date calendars = calendar.getTime();Date date = DateUtils.addDays(calendars, Integer.valueOf(fileUtils.getXSSFCellValue(row.getCell(2))));Instant instant = date.toInstant();ZoneId zoneId = ZoneId.systemDefault();LocalDate expiresOn = instant.atZone(zoneId).toLocalDate();cnUserGiftRedeemCode.setExpiresOn(expiresOn);}}}cnUserGiftManagerService.insertGiftRedeemCode(cnUserGiftRedeemCode);//添加礼品兑换单}result.put("success", 1);//成功结果} else {result.put("error", "标题为空或列数有误，请严格按照模板格式导入！");writeJson(result);return null;}} else {result.put("error", "标题名称有误，请严格按照模板格式导入！");writeJson(result);return null;}try {stream.close();} catch (IOException e) {e.printStackTrace();}
}

EXCEL格式：

三：fileUtils 文件和EXCEL文件的公共工具类（判断图片或文件的尾缀以及类型）

package com.chem.www.util;import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.apache.poi.xssf.usermodel.XSSFCell;
import org.springframework.stereotype.Component;import javax.imageio.ImageIO;
import java.io.ByteArrayInputStream;
import java.text.DecimalFormat;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;@Slf4j
@Component
public class FileUtils {public static final String FORMAT_JPG = "jpg";public static final Map<String, String> FILE_TYPE_MAP = new HashMap<String, String>();static {FILE_TYPE_MAP.put("xls", "D0CF11E0");  //MS WordFILE_TYPE_MAP.put("xlsx", "504B0304");  //MS Word}/*** 获得图片尾缀*/public String getImageFormatName(byte[] bytes, String defaultFormat) {try {var imageStream = ImageIO.createImageInputStream(new ByteArrayInputStream(bytes));var readerIterator = ImageIO.getImageReaders(imageStream);if (readerIterator.hasNext()) {var reader = readerIterator.next();var format = reader.getFormatName().toLowerCase();// 文件格式名参考 PNGImageReaderSpi，大体可用，只是 JPG 搞特殊，额外处理一下if ("jpeg".equals(format)) {format = FORMAT_JPG;}return format;}} catch (Exception ignore) {}return defaultFormat;}/*** 获得文件尾缀*/public final String getFileTypeByStream(byte[] b, String uploadName) {String filetypeHex = String.valueOf(getFileHexString(b));Iterator<Map.Entry<String, String>> entryIterator = FILE_TYPE_MAP.entrySet().iterator();while (entryIterator.hasNext()) {Map.Entry<String, String> entry = entryIterator.next();String fileTypeHexValue = entry.getValue();if (filetypeHex.toUpperCase().startsWith(fileTypeHexValue)) {if (entry.getKey() != null) {return StringUtils.substringAfterLast(uploadName, ".");}return entry.getKey();}}return null;}public final String getFileHexString(byte[] b) {StringBuilder stringBuilder = new StringBuilder();if (b == null || b.length <= 0) {return null;}for (int i = 0; i < b.length; i++) {int v = b[i] & 0xFF;String hv = Integer.toHexString(v);if (hv.length() < 2) {stringBuilder.append(0);}stringBuilder.append(hv);}return stringBuilder.toString();}public static String getXSSFCellValue(XSSFCell cell) {String cellValue = "";if (cell != null) {DecimalFormat decimalFormat = new DecimalFormat("##########.##########");switch (cell.getCellType()) {case XSSFCell.CELL_TYPE_STRING:cellValue = cell.getRichStringCellValue().getString().trim();break;case XSSFCell.CELL_TYPE_NUMERIC:cellValue = decimalFormat.format(cell.getNumericCellValue());break;case XSSFCell.CELL_TYPE_BOOLEAN:cellValue = String.valueOf(cell.getBooleanCellValue()).trim();break;case XSSFCell.CELL_TYPE_FORMULA:cellValue = cell.getCellFormula();break;default:cellValue = "";}}return cellValue;}
}

KnockOut+TypeScript+上传图片（oos功能）以及导入Excel文件（oos功能）并回显插入相关推荐

sheetJS+input——实现vue导入excel文件，并判断文件内容是否正确——基础积累
之前写了关于sheetJS导出excel表格的文章,今天来写一下导入功能. 先记录一下关于sheetJS的部分资料内容,方便后续查看. 1.关于sheetJs的部分资料 1.1 sheetJs官网 s ...
ExcelToMySQL-批量导入Excel文件到MySQL数据库的自动化工具
ExcelToMySQL:批量导入Excel文件到MySQL数据库的自动化工具简介 ExcelToMySQL 是一个可以批量导入excel到数据库(mysql/oracle/sqlserver)的自 ...
ExcelToOracle：批量导入Excel文件到Oracle数据库的自动化工具
ExcelToOracle:批量导入Excel文件到Oracle数据库的自动化工具简介 ExcelToOracle 是一个可以批量导入excel到数据库(mysql/oracle/sqlserver ...
关于使用Java后台导入excel文件，读取数据后，更新数据库，并返回数据给到前端的相关问题总结
在之前的项目中,使用到了Java后台读取excel文件数据的功能点,本想着该功能点已经做过了,这一类的应该都大差不离,不过在刚结束的一个项目中,现实给我深深的上了一课,特此编写此片博客,以作记录,并给 ...
EasyExcel组件导入Excel文件
一.问题出现最近项目中需要实现一个Excel文件导出功能,于是乎,就选择使用了EasyExcel组件来进行Excel文件的导入与导出. 二.代码实现 EasyExcel实现文件的导入,最主要的是需要 ...
如何优雅的用POI导入Excel文件
在企业级项目开发中,要经常涉及excel文件和程序之间导入导出的业务要求,那么今天来讲一讲excel文件导入的实现.java实现对excel的操作有很多种方式,例如EasyExcel等,今天我们使用的 ...
wxwidgets mysql_wxWidgets导入Excel文件详细教程
开始写教师端程序,首先要实现导入EXCEL文件,读取数据后再添加到mysql数据库.wxWidgets提供了wxAutomationObject类,用来调用OLE automation的方法.网上找到 ...
导入excel文件处理流程节点的解决方案
导入excel文件处理流程节点的解决方案参考文章: (1)导入excel文件处理流程节点的解决方案 (2)https://www.cnblogs.com/webreport/archive/2012 ...
@excel注解_惊了！如何通过阿里 EasyExcel 7 行代码, 优雅地实现 Excel 文件导出功能？...
目录一.前言二.Apache poi.jxl 的缺陷三.阿里出品的 EasyExcel,安利一波四.EasyExcel 解决了什么五.快速上手六.特殊场景支持七.Web 下载示例代码八 ...

KnockOut+TypeScript+上传图片（oos功能）以及导入Excel文件（oos功能）并回显插入

一：上传图片

二：导入EXCEL文件

KnockOut+TypeScript+上传图片（oos功能）以及导入Excel文件（oos功能）并回显插入相关推荐

最新文章

热门文章