vue ant-design上传文件，暂存后在其他页面提交数据（file格式转base64后保存数据，其他页面获取缓存后再转成file格式）

标签：const base64string base64 file 格式 上传 页面

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')
}

　　

 

标签：const,base64string,base64,file,格式,上传,页面
From： https://www.cnblogs.com/xbxxf/p/18382881