关于vue加element-ui上传文件获取文件的sha256的值
首先使用element的上传文件的组件
安装依赖crypto-js
<el-upload
class="upload-demo"
drag
:http-request="uploadCrt"
action=""
:limit='1'
:file-list="fileList"
:on-exceed='_change' >
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或<em>点击上传</em>
</div>
</el-upload>
然后写方法
uploadCrt(param) {
let that = this;
var contractFile = param.file;
// console.log(contractFile)
var reader = new FileReader(),
self = this;
var blobSlice =
File.prototype.mozSlice ||
File.prototype.webkitSlice ||
File.prototype.slice;
var chunkSize = 6 * 1024 * 1024;
var chunks = Math.ceil(contractFile.size / chunkSize);
var currentChunk = 0;
var hasher = CryptoJS.algo.SHA256.create();
var start = currentChunk * chunkSize;
var end =
start + chunkSize >= contractFile.size
? contractFile.size
: start + chunkSize;
reader.readAsArrayBuffer(blobSlice.call(contractFile, start, end));
reader.onload = function (evt) {
var fileStr = evt.target.result;
var tmpWordArray = self.arrayBufferToWordArray(fileStr);
hasher.update(tmpWordArray);
currentChunk += 1;
fileStr = null;
tmpWordArray = null;
if (currentChunk < chunks) {
var start = currentChunk * chunkSize;
var end =
start + chunkSize >= contractFile.size
? contractFile.size
: start + chunkSize;
reader.readAsArrayBuffer(blobSlice.call(contractFile, start, end));
}
};
reader.onloadend = function () {
contractFile = null;
var hash = hasher.finalize();
hash.toString(); //计算结果
that.filehash = hash.toString();
console.log(that.filehash)
hasher = null;
blobSlice = null;
reader = null;
hash = null;
};
},
arrayBufferToWordArray(ab) {
var i8a = new Uint8Array(ab);
var a = [];
for (var i = 0; i < i8a.length; i += 4) {
a.push(
(i8a[i] << 24) | (i8a[i + 1] << 16) | (i8a[i + 2] << 8) | i8a[i + 3]
);
}
return CryptoJS.lib.WordArray.create(a, i8a.length);
},
计算结果sha256的值
关于vue加element-ui上传文件获取文件的sha256的值的更多相关文章
- element ui 上传文件,读取内容乱码解决
element ui 上传文件,读取内容乱码解决: 加第二个参数 reader.readAsText(file.raw,'gb2312'); <el-upload class="upl ...
- Element ui 上传文件组件(单文件上传) 点击提交 没反应
element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...
- element UI 上传文件成功后 - 清空文件
request({ url: '/jiekou', method: 'post', data }).then(res => { this.$message({ type: 'success', ...
- vue element ui 上传 请求接口
在页面上 http-request: 覆盖默认的上传行为,可以自定义上传的实现 <el-upload class="avatar-uploader" action=&qu ...
- vue中element 的上传功能
element 的上传功能 最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传upload 看完文档后,感觉有两种思路可以实现 基于before-upload :上传文件之前的钩子,参数为上传的 ...
- element upload上传前对文件专门bs64上传
<!-- 文件上传 --> <template> <section class="file-upload"> <p class=" ...
- C#WPF做FTP上传下载获取文件列表
Xaml.cs: using Microsoft.Win32;using System;using System.Collections.Generic;using System.IO;using S ...
- 使用.net FtpWebRequest 实现FTP常用功能 上传 下载 获取文件列表 移动 切换目录 改名 .
平时根本没时间搞FTP什么的,现在这个项目需要搞FTP,为什么呢,我给大家说下项目背景,我们的一个应用程序上需要上传图片,但是用户部署程序的服务器上不让上传任何东西,给了我们一个FTP账号和密码,让我 ...
- vue实现图片的上传和删除
目录 1 UI库使用ElementUI 2 后端使用Express + formidable模块 1 UI库使用ElementUI 安装ElementUI $ npm install --save-d ...
- SpringBoot 整合文件上传 elment Ui 上传组件
SpringBoot 整合文件上传 elment Ui 上传组件 本文章记录 自己学习使用 侵权必删! 前端代码 博主最近在学 elment Ui 所以 前端使用 elmentUi 的 upload ...
随机推荐
- python项目实战——一元线性回归预测模型
文章目录 1.一元线性回归简介 2.环境准备 3.数据准备 4.可视化数据 5.构建线性回归模型 在数据科学领域,预测分析是一项核心技能.一元线性回归作为预测分析的基石,能够帮助我们理解一个自变量如何 ...
- mysql清理异常字符
目前主要是清理 Mysql有时候会有一些异常字符导致数据导出失败. 发现异常字符的文字 通过如下脚本,数据库异常字符和正常字符的差异.得到异常字符的编号 SELECT hex(name),name,h ...
- react hooks + ts 封装组件
react hooks+ts组件封装 简介 在react使用ts封装组件,需要注意类型, 使用 forwardRef 方法包起来 子组件 import * as React from "re ...
- 采用线性回归实现训练和预测(Python)
已知测得某块地,当温度处于15至40度之间时,数得某块草地上小花朵的数量和温度值的数据如下表所示.现在要来找出这些数据中蕴含的规律,用来预测其它未测温度时的小花朵的数量. 测得数据如下图所示: imp ...
- 去除tinymce中粘贴的样式
import "tinymce/plugins/paste"; tinymce.init({ ...其他配置, plugins: ["paste"], past ...
- Mysql数据库笔记整理
数据库-理论基础 1.什么是数据库? 数据:描述事物的符号记录,可以是数字.文字.图形.图像.声音.语言等,数据有多种形式,它们都可以经过数字化后存入计算机. 数据库:存储数据的仓库,是长期存放在计算 ...
- 使用 ibatis 处理复杂对象数据关系的实例
如何使用 ibatis 处理复杂对象数据关系 iBatis 是一个开源的对象关系映射程序,其工作是将对象映射到 SQL 语句.和其它 O/R Mapping 框架不同,iBatis 开发者需要自己编写 ...
- 前端实战之使用canvas合并图片
最近做一个完整的系统,前端中涉及到一个推广图片的生成,其中推广图片是由一个变化的链接生成的二维码与一个固定图片拼接而成 实现demo: qrcode.png:https://images.cnblog ...
- vue之vuex使用
如图所示,它是一个程序里面的状态管理模式,它是集中式存储所有组件的状态的小仓库,并且保持我们存储的状态以一种可以预测的方式发生变化.对于可以预测,现在我不多做说明,相信在看完这篇文章之后,你就会有自己 ...
- MySQL同步ES方案
1. 前言 在实际项目开发中,我们经常将 MySQL 作为业务数据库,ES 作为查询数据库,用来实现读写分离,缓解 MySQL 数据库的查询压力,应对海量数据的复杂查询. 这其中有一个很重要的问题,就 ...