Vue上传文件到OSS并校验文件的md5值
最近在做的项目中需要在Vue
中上传文件到阿里云OSS
,还需要在上传之前需要先校验文件的md5
值,如果md5
值相同就不在重复上传,我查看了一些阿里云OSS
的文档,并没有发现可以校验文件md5
值的相关的接口,所以,我在服务器端保存了文件的md5
值,在上传之前先去服务器校验一下文件的md5
值是否存在,如果存在就不在重复上传,否则,就先上传并保存文件的md5
值。
Vue
前端获取文件的md5
值
使用的是 SparkMD5库来获取文件的md5
值
-
安装
npm install --save spark-md5
-
获取文件的
md5
值使用
Promise
实现获取文件的md5
值,并封装成一个module
,file.js
export function uploadMedia() { return new Promise((resolve, reject) => { // 分片读取文件 const fileReader = new FileReader() const chunkSize = 1024 * 1024 * 2 //每个分片的大小 2MB const chunks = Math.ceil(option.file.size / chunkSize) let currentChunk = 0 var spark = new SparkMD5.ArrayBuffer() const loadFile = (e) => { spark.append(e.target.result) currentChunk++ if (currentChunk < chunks) { //未读取完继续读取 loadNext() } else { // 文件读取完 const md5 = spark.end() // 获取文件的md5值 // checkFileMd5() //服务器端实现的接口 } } const loadError = () => { // 读取文件失败 reject('compute file md5 error') } const loadNext = () => { fileReader.onload = loadFile fileReader.onerror = loadError const start = currentChunk * chunkSize const end = ((start + chunkSize) >= option.file.size) ? option.file.size : start + chunkSize const data = option.file.slice(start, end) fileReader.readAsArrayBuffer(data) } loadNext() }}
上传文件到 OSS
使用的是 ali-oss
库
-
安装
npm install ali-oss
-
封装client
const OSS = require('ali-oss')export function getOssClient() { return new OSS({ region: 'xxxxxx', accessKeyId: 'xxxxxxxxxxx', accessKeySecret: 'xxxxxxxxxxxxxxxx', bucket: 'xxxxxxxxxxxxx' })}
-
上传文件
const client = getOssClient()// oss_path: 上传文件的路径// file: 需要上传的文件client.multipartUpload(oss_path, file,{ //上传的进度回调 progress: function(p) { //p :上传的进度 }}).then(res => { //上传成功}).catch(res => { //上传失败})
服务器端校验文件的md5值
在服务器端需要存储文件的md5
值和上传的上传的文件的路径,md5
值和文件路径是一一对应的,再上传之前,先通过文件的md5
值,查询是否存在,如果存在就返回之前上传的文件路径,否则就将md5
值和上传文件的路径,并保存起来
```jsfunction checkFileMd5({md5:md5}).then(res => { if (res.s === 0) { //md5已经存在就不需要上传 } else { //如果不存在 // 先上传到oss,获取到文件的路径 ..... upload to oss updateFileMd5({md5:md5,url:url}).then(res => { // 更新文件的md5和文件路径到服务器 }) }}).catch(res => { })```
文章转载于:https://www.jianshu.com/p/7ab23f7a2122
原著是一个有趣的人,若有侵权,请通知删除
评论前必须登录!
立即登录