关于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 ...
随机推荐
- 手把手教会你使用Markdown【从入门到精通一篇就够了】
目录 一.Markdown是什么 二.Markdown优点 三.Markdown的基本语法 3.1 标题 3.2 字体 3.3 换行 3.4 引用 3.5 链接 3.6 图片 3.7 列表 3.8 分 ...
- orange pi 香橙派 zero 刷openwrt当作有wifi的小路由器用
前面写过我用香橙派zero来测量温度 https://www.cnblogs.com/jar/p/15848178.html 最近准备把他改造成路由器 https://www.right.com.cn ...
- .NET LINQ分析AWS ELB日志
前言 小明是个单纯的.NET开发,一天大哥叫住他,安排了一项任务: "小明,分析一下我们超牛逼网站上个月的所有AWS ELB流量日志,这些日志保存在AWS S3上,你分析下,看哪个API的响 ...
- 发布一个TCP 吞吐性能测试小工具
当写完一个TCP服务的时候,是不是很想马上测试一下这个服务的性能,它到底能应付怎样的请求处理,其性能又是怎样呢.相信以下这个小工具能帮到你的小忙,它是基于Beetle实现的一个小工具只需要设置一下参数 ...
- 看不懂来打我,Vue3的watch是如何实现监听的?
前言 watch这个API大家都很熟悉,今天这篇文章欧阳来带你搞清楚Vue3的watch是如何实现对响应式数据进行监听的.注:本文使用的Vue版本为3.5.13. 关注公众号:[前端欧阳],给自己一个 ...
- golang之代码检查工具golangci-lint
日常开发中,想要保证工程中代码能够正常运行, 一般都会使用vet进行代码静态扫描, 但是每次手动执行命令有点不太方便,如果在每次开发完成之后,git提交的时候都进行下检查就OK了,想好就干!!! 这里 ...
- python之日常开发常用库
1. 配置文件解析(configobj) pip install configobj 基本使用: 配置文件 [server] name = zbj port = 9000 [home] # 注释 ar ...
- Python3之常用包汇总
Python包网站: https://pypi.org/ 1. 繁体与简体转换(https://github.com/berniey/hanziconv.git) pip install hanzic ...
- H5C3时钟实例(rem适配)
1.原理分析和效果图 先上效果图: 屏幕适配上使用rem适配,假设用户的手机屏幕最下宽度是375px,而谷歌浏览器最小的字体大小为12px,所以我以375px为标准尺寸进行rem适配,即375px的屏 ...
- winform窗体无边框拖动
1:引用命名空间 using System.Runtime.InteropServices; 2:想要拖动窗体的控件绑定MouseDown事件 点击查看代码 //窗体移动 [DllImport(&qu ...