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值，并封装成一个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值和上传文件的路径，并保存起来

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

原文链接