写点什么

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

  • 2023-02-23
    北京
  • 本文字数:3283 字

    阅读完需:约 11 分钟

本文分享自天翼云开发者社区 @《使用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 />

 

————————————————

版权声明:本文为 CSDN 博主「包淼淼」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/qq_32849999/article/details/110000814

 

用户头像

还未添加个人签名 2022-02-22 加入

天翼云是中国电信倾力打造的云服务品牌,致力于成为领先的云计算服务提供商。提供云主机、CDN、云电脑、大数据及AI等全线产品和场景化解决方案。

评论

发布
暂无评论
使用element-ui 的上传组件upload完成自定义上传到天翼云oss云服务器_天翼云开发者社区_InfoQ写作社区