文件上传及使用simple-uploader的上传及spark-md5.js加密

一般实现文件上传有两种方式一种是通过form来进行传输，一种是通过input type:file将识别到的file文件转为前后端通用的语言进行传输

使用到的有fileReader

let fr= new FileReader()
//通过fr可以将文件转换为其他形式，相当于一个转化器
// 将文件转化成为base64的形式,这个转化是异步的
fr.readAsDataURL(a)
fr.onload=()=>{
    console.log(fr.result,'通过这个值来拿处理后的')
}

可以通过fileReader来实现缩略图,或者将txt格式的文字展示到页面上

<template>
  <div>
    <div class="left">内容不一样
      <div class="box">文件上传</div>
    <input type="file" @change="upload">
    <!-- 图片缩略图 -->
    <img :src="src" style="width:200px">
    <div v-html="he"></div>
    </div>
 
  </div>
</template>
<script setup>
import {ref} from 'vue'
const src=ref()
const he=ref()
const upload=(e)=>{
  let a=e.target.files[0]
  let fr= new FileReader()
  // 将文件转化成为base64的形式
  // fr.readAsDataURL(a)
  // 将txt文件转化为文本的形式
  fr.readAsText(a)
  fr.onload=()=>{
    console.log(fr.result,'result');
    // src.value=fr.result
    he.value=fr.result
  }
}
 
</script>

simple-uploader相当于一个插件，可以实现分片上传、秒传、断点续传的全局上传

安装插件

写一个简单的例子，不带加密的，单纯的切片上传文件

<template>
    <div class="list">
      <ul>
        <li >
           <el-button ref="btn">uploader-file</el-button>
        </li>
      </ul>
    </div>
</template>
<script setup>
import {ref, onMounted, nextTick} from 'vue'
import Uploader from 'simple-uploader.js'


const fileComplete=(rootFile)=>{
  console.log('文件上传成功了');
}
const fileAdded=(file)=>{
  let fileReader = new FileReader();
  // 暂停文件上传
  file.pause();
  // 先将前端语言file转化成前后端通用语言二进制
  fileReader.readAsArrayBuffer(new Blob([file]));
  // fileReader.readAsArrayBuffer这一步是一个异步函数所以需要暂停处理
  fileReader.onload = (e) => {
    // 继续文件上传
   file.resume()
  };
}



// 创建文件打开事件
const btn=ref()
// 初始化
const uploaderFile=()=>{
  var uploader = new Uploader({
  // 上传的目标路径
  target: `/dev-api/dataHarvesting-server/api/regulationInf/v1/uploadFile`,
  // 切片上传的大小
  chunkSize: 2 * 1024 * 1024,
})
// 将按钮设置为点击弹窗出现
 uploader.assignBrowse(btn.value.ref)
 uploader.on('fileAdded',fileAdded)
 uploader.on('fileComplete',fileComplete)
}
onMounted(()=>{
    uploaderFile()
})
</script>

而spark-md5.js加密一般是在文件切片上传的时候，给文件设置的唯一标识。

加密的两种方法：

1.用SparkMD5.hashBinary( ) 直接将整个文件的二进制码传入直接返回文件的md5、这种方法对于小文件会比较有优势——简单并且速度快。

2.利用js中File对象的slice( )方法（File.prototype.slice( )）将文件分片后逐个传入spark.appendBinary( )方法来计算、最后通过spark.end( )方法输出结果，很明显，这种方法对于大型文件会非常有利——不容易出错，并且能够提供计算的进度信息