- 时间:2022-11-03 11:24 编辑: 来源: 阅读:290
- 扫一扫,手机访问
摘要:Vue上传文件到OSS和mcrc md5值。
{源码交易}
Vue上传文件到OSS和mcrc的md5值。最近在做的项目中,需要上传文件到Vue中的阿里云OSS。在上传之前,我还需要mcrc的md5值。如果md5值相同,我就不再上传了。我查了几个阿里云OSS文档,没有找到任何可以mcrc md5值的相关接口。因此,我在服务器端保存了文件的md5值。上传前,我去服务器检查文件的md5值是否存在,如果存在,则不存在。 e . Vu的前台通过使用Sparkmd5库获取文件的md5值来获取文件的md5值。请参考安装npm install - save spark-md5的链接以获取文件的md5值。用Promise实现文件的MD5值并封装成一个模块,file.js导出函数upload media(){ return new Promise((resolve,reject)= >;{//读取文件const filereader = new filereader()const chunk size = 1024 * 1024 * 2//每个切片的大小为2mb const chunks = math . ceil(option.file.size/chunk大小)let current chunk = 0 var spark = new spark MD5 . array buffer()const loadfile =(e)= >;{ spark . append(e . target . result)current chunk ++ if(current chunk & lt;Chunks) {//继续读取loadNext()} else {//读取文件后const md5 = spark.end() //获取文件的md5值//check md5()//服务器实现的接口}} constload错误=()= >:{//读取文件失败拒绝('计算文件MD5错误')} const load next =()= >;{ filereader . onload = loadFile filereader . on error = loadError const start = current chunk * chunkSize const end =((start+chunkSize)& gt;= option.file.size)?option . file . size:start+chunkSize const data = option . file . slice(start,end)filereader . readasaraybuffer(data)} loadNext()} }使用ali-oss库引用链接将文件上传到OSS以安装npm安装ali-oss软件包客户端constoss = require ('Ali-OSS ')导出函数getoss client(){ return new OSS({ region:' XXXXXX ',accessKeyId:' xxxxxxxxxxxxxxxxx ',accesskey secret:' xxxxxxxxxxxxxxxxxxxxxxxxxx ',Bucket:' xxxxxxxxxxx ' } }上传文件const client = getossclient然后(RES = >;{//上传成功})。catch(RES = >;{//上传失败})服务器端mcrc的md5值需要在服务器端存储文件的md5值和上传文件的路径。md5值与上传文件的路径一一对应。上传前,先通过文件的md5值检查是否存在。如果存在,返回之前上传文件的路径,否则保存md5值和上传文件的路径``` ` JS函数检查文件MD5 ({MD5 {if (res.s = = 0) {//MD5已经存在,不需要上传}否则{//如果不存在,//先上传到oss,获取文件的路径...上传到OSS更新文件MD5 ({MD5: MD5,URL: URL})。然后(RES = >;{//将文件的md5和文件路径升级到服务器}}})。catch (res = >: {})` ` `引用链接