前端文件、图片直传OOS、分片上传、el-upload上传（vue+elementUI）

前言：基于天翼云的面相对象存储(Object-Oriented Storage，OOS),实现小文件的直接上传，大文件的分片上传。

开发文档地址：网址

在这里插入图片描述

上传之前的相关操作：注册账户，创建 AccessKeyId 和 AccessSecretKey之后，新建一个桶bucket做cors相关配置将暴露的 Headers:设置成: ETag，然后在public文件夹下面的index.html引入相关sdk文件（这里引入的是oos-sdk-6.0.min.js，文档的oos-js-sdk-6.2.zip解压包内部包含了这个文件，以及相关的实现demo案例）
在这里插入图片描述

在这里插入图片描述

一、直接上传（如：图片，小型文件）

在这里插入图片描述
使用的是putObject方法，下面是个uploadFile.vue组件

<template>
  <div>
    <el-upload
      action="#"
      :before-upload="beforeAvatarUpload"
      :list-type="showType"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :limit="1"
      ref="uploadPic"
      :file-list="fileList">
      <!-- 预留的插槽 -->
      <slot name="uploadIcon"></slot>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
   
   
  name: "upLoadFile",
  props: {
   
   
    fileList: {
   
   
      type: Array,
      default: () => {
   
   
        return []
      },
    },
    // 文件上传的时候的初始样式
    showType: {
   
   
      type: String,
      default: 'picture-card'
    },
  },
  data() {
   
   
    return {
   
   
      dialogVisible: false,
      clickTime: null,
      Bucket: null,
      dialogImageUrl: '',
    }
  },
  methods: {
   
   
    // 直接上传
    beforeAvatarUpload(file) {
   
   
      let that = this
      return new Promise((resolve, reject) => {
   
   
        that.clickTime = that.$moment().format("YYYYMMDD")
        // 这里创建client对象的配置项目说明 文档的options 配置项有详细解释
        var client = new OOS.S3({
   
   
          accessKeyId: '前面创建的accessKeyId', // 通过天翼云控制台创建的 access key
          secretAccessKey: '前面创建的secretAccessKey', // 通过天翼云控制台创建的 secret access key;
          endpoint: '域名', // OOS 域名
          signatureVersion: 'v4', // 可选v2 或v4
          apiVersion: '2006-03-01',
          s3ForcePathStyle: true
        });
        that.Bucket = '桶的名称'
        const key = that.clickTime + '/' + file.name  // 
        toUpload(that.Bucket, file, key)
        function toUpload(bucket, file, key) {
   
   
          var params = {
   
   
            Bucket: bucket,
            Body: file, // file内容
            Key: key,// 文件名称
          };
          client.putObject(params, function (err, data) {
   
   
            if (err) {
   
   
            } else {
   
   
              console.log('上传成功');
              // 上传成功之后是没有返回值的
              // 访问的上传成功的图片路径的规则    你的域名/桶的名称/key   (key就是前面拼接的文件名称)

            }
          })
        }
      })
    },
    // 图片展示
    handlePictureCardPreview(