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