使用element-ui 的上传组件upload完成自定义上传到天翼云oss云服务器

首先配置天翼云，如下操作

1、要求

在使用 OOS 之前，首先需要在 www.ctyun.cn 注册一个账号（Account）。 创建 AccessKeyId 和 AccessSecretKey。AccessKeyId 和 AccessSecretKey 是您访 问 OOS 的密钥，OOS 会通过它来验证您的资源请求，请妥善保管

2 使用方式

<!—引入本地资源-->
<script src="./oos-sdk-x.x.x.min.js"></script> 

使用 new OOS 创建 oos 对象 OOS JS-SDK 目前只支持异步请求方式，通过 callback 方式处理，对于 err 处理，非 err 显示处理结果。下图示例初始化到返回结果流程：

var client = new OOS.S3({...});
var params;
client.listObjects(params, function (err, data) {
if (err) console.log(err, err.stack); // an error occurred
else console.log(data); // successful response
});

3 CORS 配置

从浏览器中直接访问 OOS 需要开通 Bucket 的 CORS：

• 将 来源（*）设置成: *

• 将允许的方法（*）设置成: PUT, GET, POST, DELETE, HEAD

• 将允许的 Headers 设置成: *

• 将暴露的 Headers：设置成: ETag 注意：请将该条 CORS 规则设置成所有 CORS 规则的第一条

 

由于浏览器的同源策略，在浏览器里调用 JS-SDK 时, 部分功能无法实现，包括 Service 的 操作，Bucket 的新建，AccessKey 以及 SecretKey 的操作

4、options配置项

OOS options介绍

封装上传组件如下：

<template>
  <div :class="{exceed: isExceed}">
    <el-upload ref="upload" action="#" :http-request="httpRequest" :before-upload="beforeUpload"
      list-type="picture-card" :on-preview="handlePictureCardPreview" :file-list="fileList" :on-remove="handleRemove"
      v-bind="$attrs" :on-exceed="handleOnExceed" :on-success="handleOnSuccess" :on-change="onChangeFile">
      <i class="el-icon-plus"></i>
    </el-upload>
    <i v-if="bottomTip">{{bottomTip}}</i>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl">
    </el-dialog>
    <image-viewer :z-index="3000" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList" />
  </div>
</template>
<script>
import imageViewer from 'element-ui/packages/image/src/image-viewer'
var Bucket = '********'
var accessKeyId = '********'
var secretAccessKey = '********'
var endPoint = 'oos-cn.ctyunapi.cn'
export default {
  name: 'd2-upload',
  components: { imageViewer },
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    },
    bottomTip: {
      type: String
    },
    removeAfterUpload: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  data () {
    return {
      fileList: [],
      uploadList: [], // 自定义的数组，用于处理fileList，fileList是只读的
      dialogImageUrl: '',
      dialogVisible: false,
      isInternal: false,
      isExceed: false,
      showViewer: false,
      previewSrcList: [],
      clent: null
    }
  },
  watch: {
    value: {
      handler (val) {
        if (!this.isInternal) {
          if (!this.uploadList.length) {
            this.fileList = val.map(item => {
              return {
                url: item
              }
            })
          }
          this.setIsExceed()
        } else {
          this.isInternal = false
        }
      },
      immediate: true
    }
  },
  methods: {
    // 选择上传文件,上传成功后都会出发
    onChangeFile (file, fileList) {
      this.fileList = fileList
      let index = this.fileList.findIndex(item => {
        return file.raw.response === item.raw.response
      })
      if (file.raw.response) {
        this.uploadList.splice(index, 0, file.raw.response)
        this.emitData(this.uploadList)
      }
    },
    async httpRequest (file) {
      await this.handleUpload(file.file)
    },
    handleUpload (file) {
      this.isInternal = true
      return new Promise((resolve, reject) => {
        let that = this
        var params = {
          Body: file,
          Bucket: Bucket,
          Key: file.name
        }
        that.client.putObject(params, function (err, data) {
          if (err) {
            console.log(err, err.stack) // an error occurred
            resolve(false)
            that.$message.error('上传失败')
          } else {
            file.response = 'https://' + endPoint + '/' + params.Bucket + '/' + params.Key
            that.$message.success('上传成功')
            that.isInternal = false
            resolve(true)
          }
        })
      })
    },
    initOss () {
      this.client = new OOS.S3({
        accessKeyId: accessKeyId,
        secretAccessKey: secretAccessKey,
        endpoint: endPoint,
        signatureVersion: 'v4', // 可选v2 或v4
        apiVersion: '2006-03-01',
        s3ForcePathStyle: true
      })
    },
    beforeUpload (file) {

    },
    handleOnExceed (file, fileList) {
      this.$message.warning('数量超出限制')
    },
    handleRemove (file, fileList) {
      let index = this.fileList.findIndex(item => {
        if (file.raw) {
          return file.raw.response === item.raw.response
        } else {
          return file.url === item.url
        }
      })
      this.uploadList.splice(index, 1)
      this.isInternal = true
      this.fileList = fileList
      this.emitData(this.uploadList)
      this.isExceed = false
    },
    handlePictureCardPreview (file) {
      this.previewSrcList = [file.raw.response]
      this.showViewer = true
    },
    handleOnSuccess (response, file, fileList) {
      this.fileList = fileList
      this.isInternal = true
      this.setIsExceed()
      if (this.removeAfterUpload) {
        this.$refs.upload.clearFiles()
        this.uploadList = []
      }
    },
    emitData (list) {
      this.$emit('input', list)
    },
    closeViewer () {
      this.showViewer = false
    },
    setIsExceed () {
      if (this.$attrs.limit && this.fileList.length >= this.$attrs.limit) {
        this.isExceed = true
      } else {
        this.isExceed = false
      }
    }
  },
  mounted () {
    this.initOss()
  }
}
</script>
<style scoped>
.exceed >>> .el-upload {
  display: none;
}
</style>

组件引用：

 <d2-upload v-model="form.uploaderUrlArray" :limit="5" accept=".png,.jpg,.jpeg" multiple />