Vue通过spark-md5.js上传本地md5文件

参考地址：https://www.codercto.com/a/19695.html

https://www.imooc.com/article/306531?block_id=tuijian_wz

先安装：

npm i spark-md5

Vue 代码：用的第二种

在input的onchange事件处理程序中调用doNormalTest或doIncrementalTest方法，并将input元素的dom节点传入就可以了

import SparkMD5 from "spark-md5";<div class="upload"><inputtype="file"id="sourceFile"placeholder="选择文件"ref="avatarInput"@change="changeImage()"accept="*"multiple="multiplt"/><span>{{ clickUpload }}</span>
</div>js:
//上传图片changeImage(e) {var that = this;var files = that.$refs.avatarInput.files;that.doIncrementalTest(files);// 文件上传服务器that.File = files[0];that.clickUpload = files[0].name;document.getElementById("sourceFile").value = "";//可以重新上传},doIncrementalTest(input) {var _this = this;var running = false; //running用于判断是否正在计算md5//这里假设直接将文件选择框的dom引用传入if (running) {return;}//这里需要用到File的slice( )方法，以下是兼容写法var blobSlice =File.prototype.slice ||File.prototype.mozSlice ||File.prototype.webkitSlice,file = input[0],chunkSize = 2097152, // 以每片2MB大小来逐次读取chunks = Math.ceil(file.size / chunkSize),currentChunk = 0,spark = new SparkMD5(), //创建SparkMD5的实例time,fileReader = new FileReader();fileReader.onload = function(e) {console.log("Read chunk number (currentChunk + 1) of  chunks ");spark.appendBinary(e.target.result); // append array buffercurrentChunk += 1;if (currentChunk < chunks) {loadNext();} else {running = false;console.log("Finished loading!");let str = spark.end();console.log("str", str);_this.md5 = str;//赋值md5return spark.end(); // 完成计算，返回结果}};fileReader.onerror = function() {running = false;console.log("something went wrong");};function loadNext() {var start = currentChunk * chunkSize,end = start + chunkSize >= file.size ? file.size : start + chunkSize;fileReader.readAsBinaryString(blobSlice.call(file, start, end));}running = true;loadNext();//   console.log("spark============", spark);//   console.log("*************", spark.end());},

首先第一种方法：

var running = false;    //running用于判断是否正在计算md5function doNormalTest( input ) {    //这里假设直接将文件选择框的dom引用传入if (running) {    // 如果正在计算、不允许开始下一次计算return;}var fileReader = new FileReader(),    //创建FileReader实例time;fileReader.onload = function (e) {    //FileReader的load事件，当文件读取完毕时触发running = false;// e.target指向上面的fileReader实例if (file.size != e.target.result.length) {    //如果两者不一致说明读取出错alert("ERROR:Browser reported success but could not read the file until the end.");} else {console.log(Finished loading!success!!);return SparkMD5.hashBinary(e.target.result);    //计算md5并返回结果}};fileReader.onerror = function () {    //如果读取文件出错，取消读取状态并弹框报错running = false;alert("ERROR:FileReader onerror was triggered, maybe the browser aborted due to high memory usage.");};running = true;fileReader.readAsBinaryString( input.files[0] );    //通过fileReader读取文件二进制码};

第二种方法：

function doIncrementalTest( input ) {    //这里假设直接将文件选择框的dom引用传入if (running) {return;}//这里需要用到File的slice( )方法，以下是兼容写法var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,file = input.files[0],chunkSize = 2097152,                           // 以每片2MB大小来逐次读取chunks = Math.ceil(file.size / chunkSize),currentChunk = 0,spark = new SparkMD5(),    //创建SparkMD5的实例time,fileReader = new FileReader();fileReader.onload = function (e) {console("Read chunk number (currentChunk + 1) of  chunks ");spark.appendBinary(e.target.result);                 // append array buffercurrentChunk += 1;if (currentChunk < chunks) {loadNext();} else {running = false;console.log("Finished loading!");return spark.end();     // 完成计算，返回结果}};fileReader.onerror = function () {running = false;console.log("something went wrong");};function loadNext() {var start = currentChunk * chunkSize,end = start + chunkSize >= file.size ? file.size : start + chunkSize;fileReader.readAsBinaryString(blobSlice.call(file, start, end));}running = true;loadNext();}

接下来你只要在input的onchange事件处理程序中调用doNormalTest或doIncrementalTest方法，并将input元素的dom节点传入就可以了

下载：

最后，如果你需要这个工具可以通过npm直接安装，

npm i spark-md5

或者到作者的github上直接下载：

github.com/satazor/js-…

Vue通过spark-md5.js上传本地md5文件相关推荐

leaflet使用L.KML.js插件上传本地kml文件到leaflet中
发现网上的案例都是加载项目assets内的kml文件,而实际的需求是:用户需要上传自己计算机上的kml文件,找了半天没找到案例,最后终于研究出来了,喜欢的点赞支持! 1.网上案例使用 L.KML.js ...
jquery ajax上传本地dwg文件到服务器.txt
 <input type="file" id="CADFile" accept=".dwg" ...
向服务器上传本地大文件的方法xshell
用xshell自带工具Sftp即可将本地大文件上传到远程服务器中先在远程服务器进入上传文件需要上传的文件夹点击箭头指的绿色的图标. 点击取消,然后输入命令put,即可在本地寻找文件上传
ajax上传本地音频文件,使用ajax将音频blob上传到文件夹中
我正在构建一个录音项目,我想通过blob将音频上传到文件夹(上传). 这是我迄今取得的成就: var url = URL.createObjectURL(blob); var li = documen ...
wangeditor上传本地视频的方法
在官方版本的上传视频功能里,是不支持上传本地视频的,如果需要实现上传本地视频文件,可以自己定义一个上传方法. 实现思路: 1.使用input -> type="file",将 ...
linux系统怎么用SecureCRT上传和下载文件？
我们在使用linux的过程中,不论是为了安装相关软件,还是其它目的,都可能需要上传或者下载linux上的文件.借助securtCRT,使用linux命令sz可以很方便的将服务器上的文件下载到本地,使用 ...
七牛云 vue 图片上传简单解说，js 上传文件图片
七牛云 vue 图片上传简单解说,js 上传文件图片一.七牛云简介首次使用七牛云存储进行项目的图片存储,整了一上午才整明白,这些官方的教程把明白人也给说糊涂了,文档很不规范. 七牛云有免费的使用额 ...
js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
一行js_Node.js 一行命令上传本地文件到服务器
每次打包完, 都要打开 FileZilla 一顿拖拽然后才能上传代码, 那就立马撸一个自动化脚本就完事了 publish-sftp Github 传送门(~~~~顺便来骗个Star~~~~) 以后一行 ...

Vue通过spark-md5.js上传本地md5文件

下载：

Vue通过spark-md5.js上传本地md5文件相关推荐

最新文章

热门文章