vue ant-design上传文件，暂存后在其他页面提交数据（file格式转base64后保存数据，其他页面获取缓存后再转成file格式）以及文件 md5 加密
long long time no update，huuuuu~
最近做一个看起来简单但是功能有点繁琐的东西
就是再A页面上传文件，然后B页面确定上传后调用接口，我不知道我这个逻辑对不对哈，有毛病求指教
首先用的ant-design框架上传文件
<a-upload
list-type="text"
:multiple="false"
:file-list="fileList"
:before-upload="beforeUpload2"
@change="handlechangeImage"
v-decorator="[`messagefile`,{ rules: [{ required: true, message:'请上传文件'}]}]">
<a-button v-if="fileList.length < 1"><a-icon type="upload"/>上传文件</a-button></a-upload>
<a-button @click="handlePreview" type="primary"> 提交</a-button>
<script>
// blob转Base64
function blobToBase64(blob, callback){
const reader = new FileReader()
reader.onloadend =function(){
callback(reader.result)
}
reader.readAsDataURL(blob)
}
export default {
data() {
return {
fileList:[],
isLimit:false
}
},
methods: {
//上传文件前的限制
beforeUpload2(file,fileList){
const isLt20M =file.size/1024 /1024<20;
if(!isLt20M){
this.fileList.splice(e,this.fileList.length)
this.isLimit = false
this.$message.error('picture must smaller than 20MB!')
}else {
this.isLimit = true
this.fileList = [...this.filelist, file]
}
return false
}，
handlechangeImage({fileList}){
if(this.isLimit){
this.fileList = fileList
}else{
this.fileList.splice(0,this.fileList.length)
}
},
//点击跳转后的方法 ！！！！重要
handlePreview(){
const fileIn = this.fileList[0]
localstorage.setItem('myfilename ',fileIn.name)// 记得把文件名称也保存起来哦，下也页面用得到
const formData = new FormData()
formData.append('media',fileIn.originFileobj)
const blobData = formData.get('media')// 获取 Blob值
blobToBase64(blobData,base64string=>{
localstorage.setItem('myBlobKey',base64string)
})
this.$router.push({path:"/B",query:{.....}})//跳转到B页面 需要带啥参数自己写哦
},
}
}
}
</script>
B页面：
<a-button @click="handlesubmit" type="primary"> 提交</a-button>
<script>
// Base64 转blob 和file
function base64ToBlob (base64,filename){
const parts = base64.split(';base64,')
const bytecharacters=atob(parts[1])
const contentType =parts[0].split(':')[1]
const byteNumbers = new Array(bytecharacters.length)
for(let i=0;i<bytecharacters.length;i++){
byteNumbers[i]=bytecharacters.charcodeAt(i)
}
const byteArray = new Uint8Array(byteNumbers)
const blob = new Blob([byteArray],{type: contentType })
const file = new File([blob],filename,{ type: contentType })
return file
}
export default { data() {
return {
filename:'',
base64string:'',
newblob:null,
}
},
created() {
this.filename =localstorage.getItem('myfilename ')
this.base64string =localstorage.getItem('myBlobKey')
},
methods: {
handlesubmit(){
if(this.base64string){
//从Base64转换 Blob
this.newblob =base64ToBlob(this.base64string,this.filename)
}
},
}
}
</script>
最后格式是这样的
我这个是只能上传一个文件，如果上传多个，就把fileList循环一下就行了
补充一个文件加密的方法
在 beforeUpload2 方法里面 校验通过后用 SparkMD5 加密 如果没有安装，可以
npm install spark-md5
然后在页面引入一下后使用
import SparkMD5 from 'spark-md5'
使用方法
var fileReader= new FileReader() var spark = new SparkMD5.ArrayBuffer() fileReader.readAsArrayBuffer(file) fileReader.onload= (e)=>{ spark.append(e.target.result) var md5 = spark.end() console.log(md5,'md5') }
