ecph上传方法
::: demo
<div>
<div>
<el-upload
action="/"
:before-upload="beforeUpload"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<el-button @click="handlerPause">暂停</el-button>
<el-button @click="handlerRun">开始</el-button>
<div v-for="item in (uploadList || [])">
<div>{{(item || {}).Location}}</div>
</div>
<el-progress style="width: 200px;" :text-inside="true" :stroke-width="24" :percentage="percentage" status="success"></el-progress>
</div>
</div>
<script>
export default {
data() {
return {
percentage: 0,
uploadList: [],
multipartUpload: null,
awsClient: null
};
},
methods: {
async handlerRun() {
const result = await this.multipartUpload.reRun()
this.uploadList.push(result)
},
handlerPause() {
this.multipartUpload.pause()
},
async beforeUpload(file) {
this.multipartUpload = this.awsClient.multipartUpload({
file,
progress: (percent) => {
this.percentage = percent * 100;
},
breakpoint: () => {
return new Promise((res, rej) => {
this.$confirm('是否继续上传', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
res(true)
}).catch(() => {
res(false)
});
})
}
})
const result = await this.multipartUpload.run()
fetch("http://test-api.flytiger.net/base/sysStorageCeph/anon/add", {
method:"POST",
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body:JSON.stringify({
'etag' : result.ETag,
'filePath': result.Location
})
}).then(response => response.json()).then(json => {})
this.uploadList.push(result)
return false;
}
},
mounted() {
fetch("http://test-api.flytiger.net/base/sysStorageCeph/anon/getCephSignature")
.then(res => res.json())
.then(data => {
const { accessKey: accessKeyId, bucket: Bucket, endpoint, secretKey: secretAccessKey } = data.data;
this.awsClient = new AWSClient({
accessKeyId,
secretAccessKey,
endpoint: `http://${endpoint}`,
Bucket
});
console.log(this.awsClient)
})
console.log(AWSClient)
}
}
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
:::