首先配置天翼云,如下操作
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 />