纵有疾风起
人生不言弃

Vue上传文件到OSS并校验文件的md5值

Vue上传文件到OSS并校验文件的md5值

最近在做的项目中需要在Vue中上传文件到阿里云OSS,还需要在上传之前需要先校验文件的md5值,如果md5值相同就不在重复上传,我查看了一些阿里云OSS的文档,并没有发现可以校验文件md5值的相关的接口,所以,我在服务器端保存了文件的md5值,在上传之前先去服务器校验一下文件的md5值是否存在,如果存在就不在重复上传,否则,就先上传并保存文件的md5值。

Vue前端获取文件的md5

使用的是 SparkMD5库来获取文件的md5

原文链接

  • 安装

    npm install --save spark-md5
  • 获取文件的md5

    使用Promise实现获取文件的md5值,并封装成一个modulefile.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

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » Vue上传文件到OSS并校验文件的md5值

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活