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

已于 2022-02-18 15:29:34 修改
阅读量901 收藏
点赞数
文章标签： typescript 前端 javascript java
于 2022-02-18 15:24:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42892856/article/details/123004011
版权

没有看过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-ignore
        let 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-ignore
                    img.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:


    /**
     * 上传图片
     */
    @Override
    public 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-ignore
        let 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

    /**
     * 上传文件
     */
    @Override
    public 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 Word
        FILE_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;
    }
}
清风随客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
knockout-typescript-example:淘汰赛 + TypeScript Helloworld
06-22
淘汰赛 + TypeScript 你好 安装 npm install dstm install 用法 npm start open http://localhost:9966 贡献 叉它！ 创建您的功能分支： git checkout -b my-new-feature 提交您的更改： git commit -am 'Add ...
文件上传 a-upload 限制文件上传类型
热门推荐
草莓Sir的博客
03-16 1万+
文件上传 a-upload 限制文件上传类型 限制上传文件的类型 可以通过accept字段来设置点击upload按钮时扫描到的文件，下面例子中只识别Microsoft Word文档 <a-upload :headers="headers" :action="url" :fileList="fileList" @change="handleChange" accept=".doc,.doc...
阿里云 oss 视频上传 sts+前端js分片上传
bianenhui91的专栏
10-17 8912
目录 第1步 必要参数获取 第2步 执行下面php后端请求接口代码的两个类进行sts获取令牌获取 2.1 php后端请求接口 2.2 返回结果 第3步 前端获通过js获取上面的返回的3个参数 实现分片上传 第4步 上传成功后异步回调处理 第1步 必要参数获取 参数名 参数说明 备注 Endpoin.........
TypeScript实战教程（一）：表单上传与后端处理
最新发布
风吹落叶的博客
02-01 1066
目前国内的TypeScript相关的实战类教程，比较少，记录一下个人跑通表单上传与后端处理的程序，流程。TypeScript是一种由Microsoft开发和维护的开源编程语言。它是JavaScript的一个超集，意味着它扩展了JavaScript的语法，并添加了新的特性，尤其是静态类型系统。这使得开发者可以在代码编写阶段捕捉到潜在的错误，并提供更好的工具支持，如代码自动完成和重构。
上传图片组件的封装
qq_38090109的博客
01-22 446
1.图片上传组件 <template> <div style="display: inline-block;margin-bottom: 24px;position: relative"> <input style="opacity: 0;width: 0;height: 0;position: absolute;" type="file" accept="image/png, image/jpg, image/jpeg"
typescript中的队列
alias
04-22 3193
队列类 class Queue { private data = []; push = item => this.data.push(item); pop = () => this.data.shift(); } typescript版本的队列 /** * pop的返回值当data为空时返回undefined * 使用了泛型约束 */ class QueueT<T>...
vue3+element-puls+阿里oss实现文件的批量上传
m0_62857167的博客
08-03 5403
vue、element-puls、JavaScript、文件批量
Knockout+-crx插件
04-04
为knockout.chat添加功能 为自定义CSS添加一个框到您的用户个人资料页面。 将每个页面的类添加到... 添加功能以knockout.chat 为自定义CSS添加一个框到您的用户个人资料页面。 将类添加到每个页面的正文中以支持...
使用Knockout.js和Underscore.js进行Typescript提前绑定和过滤
04-07
我做了两个版本，一个版本将简单的文本转储为HTML，另一个版本则过滤下拉列表（选择）的内容。 本文仅包含较简单的文章。 我希望根据接收方式以及是否可以在某个地方托管代码示例演示来添加另一个。
Knockout.WinJS:在 WinJS 中启用 Knockout.js 的酷功能
07-04
淘汰赛Knockout.WinJS是一个Javascript（打字稿）库这是对的顶部和帮助WinJS开发者更容易编写WinJS 绑定。 它为 WinJS 带来了一些很酷的特性，例如计算 observables、自动依赖跟踪、数据上下文、流控制绑定、内置的...
knockout结合webuploader实现的上传
08-03
本资源包含以下内容： 1.引用MvcSiteMapProvider.dll实现面包屑功能demo. 2.knockout结合webuploader实现图片上传demo（文件流保存方式及文件保存服务器方式） 3.通过引用require实现模块儿化开发demo. 4.MvcSiteMapProvider.dll下载。
node环境中knockoutjs组件引入外部文件
wojiamengmeng的博客
08-02 731
刚学习knockoutjs，这几天一直在琢磨knockout组件的问题，奈何官网都是英文，花费的时间就多了一些，而且也一直没找到合适的方向。因为我想弄一个外部引入template和viewmodel文件的组件，刚开始看到官网上写fromurl什么的，我也跟着写，虽然可以引入模板但是使用这个的时候每次都需要另外好几十行代码，我感觉得更精简一些； 再补充一点，官网上引入外部文件自定义代码中有使用到j
vue3+TypeScript实现导出Excel功能
Rice_w的博客
07-12 3816
上一篇博客👉链接在这，我们使用vue3+ts实现了导入的功能，接下来，还是使用同一个组件（element-plus上传组件）来实现导出，在上篇博客中，我们在使用这个组件的同时写了一个下载模板的功能，接下来，这篇博客，我们就帮助大家完善下载模板的功能以及实现导出的功能。✌️✌️✌️ 我们通过两个按钮来实现导入导出功能、具体模板的样式如下 具体样式，请参考上篇博客 以上就是下载模板的功能实现 这样我们就实现了导出功能，同时很多时候我们可能会遇到按需导出的需求，这是，我们只需要在接口中传递相应的参数即可。..
阿里云 oss多文件上传
qq_35257117的博客
06-05 7029
平时在做 oss 上传时，通过都是单个文件上传，但是前几天工作时涉及到多个文件的上传，在所有文件都上传完成后才能再做后续的代码执行。于是在原有的oss上传基础上添加for循环去挨个上传。 介绍一下，oss 的上传可以有两种： 一种是把所有的文件上传给后端，由后端去传到阿里云oss上，这样不涉及到向后端获取accessKeyId 和bucket等，没有key泄露的风险（适用于C端客户）。 一种是向后端调接口获取key等数据，存储在本地，需要的时候调用就可以了，key值设置失效时间，一段时间过后，再向后端获取
前端高级进阶：前端部署的发展历程
LuckyWinty的博客
06-05 281
前端一说起刀耕火种，那肯定紧随着前端工程化这一话题。随着 react/vue/angular，es6+，webpack，babel，typescript 以及 node 的发展，前端已经...
JAVA入门之如何通过 POI 读取并修改 Excel(转载)
qq_34169240的博客
05-12 1740
转载网址：http://jingyan.baidu.com/article/fdbd4277cbaccab89e3f48a3.html      POI 就是专为JAVA准备的读取处理Excel的第三方组件。   用 POI读取 Excel +插入一条新的数据  工具/原料 Eclipse 一个Excel文件   步骤二 : 打开 Excel 文件，获取表格信...
博客使用方法
justwaityou1314的博客
06-09 1489
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
js导入excel数据显示html界面,js import excel显示数据在页面
weixin_31885875的博客
06-04 314
Untitled Pagefunction importXLS(fileName){objCon = new ActiveXObject("ADODB.Connection");alert(123123);objCon.Provider = "Microsoft.Jet.OLEDB.4.0";objCon.ConnectionString = "Data Source=" + fileName +...
web中的Knockout的优缺点
06-11
Knockout作为一个JavaScript库，具有以下优点和缺点： 优点： 1. 数据绑定：Knockout可以通过数据绑定的方式将数据模型中的数据自动更新到UI中，极大地减少了编写手动DOM操作的代码量。 2. MVVM模式：Knockout...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值