首先使用element的上传文件的组件

安装依赖crypto-js

npm i 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的值的更多相关文章

  1. element ui 上传文件,读取内容乱码解决

    element ui 上传文件,读取内容乱码解决: 加第二个参数 reader.readAsText(file.raw,'gb2312'); <el-upload class="upl ...

  2. Element ui 上传文件组件(单文件上传) 点击提交 没反应

    element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...

  3. element UI 上传文件成功后 - 清空文件

    request({ url: '/jiekou', method: 'post', data }).then(res => { this.$message({ type: 'success', ...

  4. vue element ui 上传 请求接口

    在页面上 http-request: 覆盖默认的上传行为,可以自定义上传的实现 <el-upload  class="avatar-uploader"  action=&qu ...

  5. vue中element 的上传功能

    element 的上传功能 最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传upload 看完文档后,感觉有两种思路可以实现 基于before-upload :上传文件之前的钩子,参数为上传的 ...

  6. element upload上传前对文件专门bs64上传

    <!-- 文件上传 --> <template> <section class="file-upload"> <p class=" ...

  7. C#WPF做FTP上传下载获取文件列表

    Xaml.cs: using Microsoft.Win32;using System;using System.Collections.Generic;using System.IO;using S ...

  8. 使用.net FtpWebRequest 实现FTP常用功能 上传 下载 获取文件列表 移动 切换目录 改名 .

    平时根本没时间搞FTP什么的,现在这个项目需要搞FTP,为什么呢,我给大家说下项目背景,我们的一个应用程序上需要上传图片,但是用户部署程序的服务器上不让上传任何东西,给了我们一个FTP账号和密码,让我 ...

  9. vue实现图片的上传和删除

    目录 1 UI库使用ElementUI 2 后端使用Express + formidable模块 1 UI库使用ElementUI 安装ElementUI $ npm install --save-d ...

  10. SpringBoot 整合文件上传 elment Ui 上传组件

    SpringBoot 整合文件上传 elment Ui 上传组件 本文章记录 自己学习使用 侵权必删! 前端代码 博主最近在学 elment Ui 所以 前端使用 elmentUi 的 upload ...

随机推荐

  1. snap和apt的区别简单了解[]

    Linux中没有tree命令的时候提示安装的时候出现了两个命令,简单看了看两者有何区别(一般用apt就可以了):   sudo snap install tree 和 sudo apt install ...

  2. ConsulManager应用场景1:如何优雅的基于Consul自动同步ECS主机监控

    [ConsulManager介绍] Consul字段设计说明 服务首次启动时会创建一个随机秘钥,存放到consul_kv的/ConsulManager/assets/secret/skey,该秘钥用于 ...

  3. 2024 xp_CAPTCHA(瞎跑-白嫖版) 4.3最新版安装使用教程

    前言 xp_CAPTCHA(瞎跑-白嫖版)是一个免费的burpsuite插件,具有自动化图形验证码识别的功能.在安装的过程中,我发现网上的教程基本都为其较早的版本,已经不具备参考价值.因而我写下本篇博 ...

  4. Python启动一个本地服务器文件下载

    日常工作中需要给同事分享下载链接,快速启动一个WebServer即可满足日常需求~ #安装软件 yum install screen -y #启动服务 python -m SimpleHTTPServ ...

  5. Redis究竟为什么这么快?

    Redis为什么这么快? 完全基于内存,数据存在内存中,绝大部分请求是纯粹的内存操作,非常快速,跟传统的磁盘文件数据存储相比,避免了通过磁盘IO读取到内存这部分的开销. 数据结构简单,对数据操作也简单 ...

  6. Educational Codeforces Round 90 (Rated for Div2)

    Donut Shops 现在有两个超市,第一个超市的物品按件卖,每件商品的售价为\(a\)元:第二个超市的物品按箱卖,每箱有\(b\)件物品,每箱售价为\(c\)元,现在要让你买\(x\)和\(y\) ...

  7. Mybatis【7】-- Mybatis如何知道增删改是否成功执行?

    代码直接放在Github仓库[https://github.com/Damaer/Mybatis-Learning/tree/master/mybatis-05-CURD ] 需要声明的是:此Myba ...

  8. php7.4.x~php8.0.x 新特性

    PHP 核心中的新特性 命名参数 新增 命名参数 的功能. // array_fill(int $start_index, int $count, mixed $value): array // 使用 ...

  9. WinForm(C/S)项目中使用矢量字体(FontAwsome、Elegant)图标

    1.介绍 字体图标在Web应用中最为常见,字体图标是矢量的,矢量图意味着每个图标都能在所有大小的屏幕上完美呈现,可以随时更改大小和颜色,而且不失真.字体图标常见的有Font Awesome和Elega ...

  10. PM2部署DotNet应用程序

    pm2简介 PM2是一个Node.js的进程管理工具,可以帮助开发者简化Node.js应用的部署和运维.它提供了进程守护.负载均衡.日志管理等功能,可以监控应用程序的运行状态,并在发生意外情况时自动重 ...