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

9/8/2020 Vue.jsJavaScript

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

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

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

# Vue前端获取文件的md5

使用的是 SparkMD5 (opens new window)库来获取文件的md5

  • 安装

    npm install --save spark-md5
    
    1
  • 获取文件的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()
        }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32

# 上传文件到 OSS

使用的是 ali-oss

  • 安装

    npm install ali-oss
    
    1
  • 封装client

    const OSS = require('ali-oss')
    
    export function getOssClient() {
      return new OSS({
        region: 'xxxxxx',
        accessKeyId: 'xxxxxxxxxxx',
        accessKeySecret: 'xxxxxxxxxxxxxxxx',
        bucket: 'xxxxxxxxxxxxx'
      })
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
  • 上传文件

    const client = getOssClient()
    // oss_path: 上传文件的路径
    // file: 需要上传的文件
    client.multipartUpload(oss_path, file,{
        //上传的进度回调
        progress: function(p) {
            //p :上传的进度
        }
    }).then(res => {
        //上传成功
    }).catch(res => {
        //上传失败
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

# 服务器端校验文件的md5值

在服务器端需要存储文件的md5值和上传的上传的文件的路径,md5值和文件路径是一一对应的,再上传之前,先通过文件的md5值,查询是否存在,如果存在就返回之前上传的文件路径,否则就将md5值和上传文件的路径,并保存起来

```js
function 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 => {
    
})
```