奋斗的宽

点击查看官方文档 (简单demo)

官网sdk介绍中js使用的库和node使用的是同一个包，ali-oss。
和nodejs不同的是，js中使用需要在控制台设置允许跨域，和headers暴露信息

• 注意设置回掉callback中键值对中value必须是string类型
• 获取文件唯一MD5标识，文件过大会出现错误

安装

yarn add ali-oss

# or

npm install ali-oss -S

简易js代码

  import OSS from 'ali-oss'
  import SparkMD5 from 'spark-md5' // 依赖库，对文件进行md5加密唯一标识
  import VProgress from './Progress' // 一个简单的进度条组件

  // localstorage缓存上传进度指针，失败后可再次上传
  const pointerCache = {
    get(file, name) {
      const cache = localStorage.getItem(cacheKey)
      if (!cache) return null
      const cacheJson = JSON.parse(cache)
      if (cacheJson.name !== name) return null
      cacheJson.file = file
      return cacheJson
    },
    set(pointer) {
      localStorage.setItem(cacheKey, JSON.stringify(pointer))
    },
    remove() {
      localStorage.removeItem(cacheKey)
    }
  }

  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {
            region: '',
            accessKeyId: '',
            accessKeySecret: '',
            bucket: ''
          }
        }
      },
      multiple: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        files: []
      }
    },
    methods: {
      async changFile() {
        const files = this.$refs.input.files || []
        for (let i = 0; i < files.length; i++) {
          const file = files[i]
          const name = await this.getName(file)
          if (!this.files.some(item => item.name === name)) {
            this.files.push({
              file,
              percent: 0,
              name
            })
          }
        }
        console.log(this.files)
      },
      getName(file) {
        return new Promise(resolve => {
          const {name} = file
          const suffix = name.substr(name.lastIndexOf('.'))
          const spark = new SparkMD5.ArrayBuffer()

          const reader = new FileReader()
          reader.readAsArrayBuffer(file)
          // Indicator.open() // loading 文件过大的时候读取时间非常长
          reader.addEventListener('load', (e) => {
            spark.append(e.target.result);
            // Indicator.close()
            resolve(spark.end() + suffix) // 文件md5加密，放置重复上传
          })
        })
      },
      async uploadAll() {
        if (this.files.length === 0) {
          // Toast('请选择文件')
          return
        }
        for (let i = 0; i < this.files.length; i++) {
          const {file, name} = this.files[i]
          await this.upload(file, name, i)
        }
      },
      async upload(file, name, index) {
        const that = this
        const client = new OSS(this.data) // 阿里文件上传对象

        let checkpoint = pointerCache.get(file, name) // 断点续传指针

        // 失败后尝试两次
        for (let i = 0; i < 2; i++) {
          try {
            const result = await client.multipartUpload(name, file, {
              checkpoint,
              async progress(percentage, cpt) { // 上传进度
                console.log(percentage)
                that.files[index].percent = parseInt(percentage * 100, 10)
                pointerCache.set(cpt)
                checkpoint = cpt
              },
            })
            pointerCache.remove()
            console.log('上传成功：', result)
            break // break if success
          } catch (e) {
            console.log('上传失败：', e)
          }
        }
      },
    },
    components: {
      VProgress
    }
  }

html部分

<template>
  <div class='upload-container'>
    <button class='btn main-btn' @click='uploadAll'>开始上传</button>

    <div class='upload-panel'>
      <p>将文件拖到此处，或 <span class='color-main'>点击上传</span></p>
      <input :multiple='multiple' @change='changFile' class='file-input' ref='input' type='file'>
    </div>

    <table v-if='files.length' class='table'>
      <tr>
        <th>原文件</th>
        <th>md5文件</th>
        <th>文件大小</th>
        <th>上传</th>
        <th>状态</th>
      </tr>
      <tr v-for='(item) in files' :key='item.file.name'>
        <td>{{item.file.name}}</td>
        <td>{{item.name}}</td>
        <td>{{item.file.size}}</td>
        <td>
          <v-progress :percent='item.percent'></v-progress>
        </td>
        <td>
          <div class='btn opacity' :class='{complete: item.percent === 100}'>{{item.percent === 100 ? '完成' : '等待'}}</div>
        </td>
      </tr>
    </table>
  </div>
</template>

css部分

<style lang='scss' scoped>
  .upload-container {
    overflow: hidden;
    margin: 20px;
  }
  .opacity {
    opacity: .7;
  }
  .color-main {
    color: #2989d8
  }

  .upload-panel {
    height: 400px;
    border: 1px dashed #ccc;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fcfcfc;
    border-radius: 15px;
    &:hover {
      border-color: #2989d8;
    }
  }

  .file-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  .btn {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    padding: 6px 12px;
    line-height: 1.42858;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    background-color: #2989d8;
    border-color: #2989d8;
    margin: 20px 0;
    font-size: 14px;
    &.main-btn {
      font-size: 20px;
    }
    &.complete {
      background-color: #ccc;
      border-color: #ccc;
    }
  }

  .table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    text-align: center;
    td, th {
      border: 1px solid #dfdfdf;
      padding: 10px 20px;
    }
  }

  div {
    justify-content: center;
  }
</style>