vue系列---【el-upload+vue获取文件的md5值】

一、什么是文件md5

MD5的是让大容量信息在用数字签名软件签署私人密钥前被压缩成一种保密的格式。

MD5是文件签名,相当于我们的身份证 独一无二的。

二、怎么生成文件md5码值

1安装依赖

npm install spark-md5 --save

2导包

import SparkMD5 from 'spark-md5'

3.获取(flie文件转md5)

// 文件状态改变时
   fileChange(file) {
     console.log(file.raw)
     var  fileReader=new FileReader()
     var Spark=new SparkMD5.ArrayBuffer()
     fileReader.readAsArrayBuffer(file.raw)
     fileReader.onload=function(e){
        Spark.append(e.target.result)
        var md5=Spark.end()
        console.log(md5)
     }
     this.fileList.push(file.raw)
     console.log(this.fileList)
   },

4.html

<el-upload
             class="upload-demo"
             drag
             action="UploadUrl()"
             :limit="limitNum"
             :auto-upload="false"
             accept=".xlsx"
             :before-upload="beforeUploadFile"
             :on-change="fileChange"
             :on-exceed="exceedFile"
             :on-success="handleSuccess"
             :on-error="handleError"
             :file-list="fileList"
             multiple
           >
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">
               将文件拖到此处,或
               <em>点击上传</em>
             </div>
             <div class="el-upload__tip" slot="tip">
               只能上传xlsx文件,且不超过10M
             </div>
           </el-upload>

 

 

posted on 2022-04-15 17:36  码农小小海  阅读(2692)  评论(0编辑  收藏  举报

导航