<!--
|
* @Description: 编辑器自定义组件示例
|
-->
|
<template>
|
<div class="upload-container">
|
<el-button
|
:style="{ background: color, borderColor: color }"
|
icon="el-icon-upload"
|
size="mini"
|
type="primary"
|
@click="dialogVisible = true"
|
>
|
upload
|
</el-button>
|
<el-dialog v-model="dialogVisible">
|
<el-upload
|
:multiple="true"
|
:file-list="fileList"
|
:show-file-list="true"
|
:on-remove="handleRemove"
|
:on-success="handleSuccess"
|
:before-upload="beforeUpload"
|
class="editor-slide-upload"
|
action="https://httpbin.org/post"
|
list-type="picture-card"
|
>
|
<el-button size="small" type="primary"> Click upload </el-button>
|
</el-upload>
|
<el-button @click="dialogVisible = false"> Cancel </el-button>
|
<el-button type="primary" @click="handleSubmit"> Confirm </el-button>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
// import { getToken } from 'api/qiniu'
|
|
export default {
|
name: 'EditorSlideUpload',
|
props: {
|
color: {
|
type: String,
|
default: '#1890ff',
|
},
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
listObj: {},
|
fileList: [],
|
};
|
},
|
methods: {
|
checkAllSuccess() {
|
return Object.keys(this.listObj).every((item) => this.listObj[item].hasSuccess);
|
},
|
handleSubmit() {
|
const arr = Object.keys(this.listObj).map((v) => this.listObj[v]);
|
if (!this.checkAllSuccess()) {
|
this.$message(
|
'Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!'
|
);
|
return;
|
}
|
this.$emit('successCBK', arr);
|
this.listObj = {};
|
this.fileList = [];
|
this.dialogVisible = false;
|
},
|
handleSuccess(response, file) {
|
const uid = file.uid;
|
const objKeyArr = Object.keys(this.listObj);
|
for (let i = 0, len = objKeyArr.length; i < len; i += 1) {
|
if (this.listObj[objKeyArr[i]].uid === uid) {
|
this.listObj[objKeyArr[i]].url = response.files.file;
|
this.listObj[objKeyArr[i]].hasSuccess = true;
|
return;
|
}
|
}
|
},
|
handleRemove(file) {
|
const uid = file.uid;
|
const objKeyArr = Object.keys(this.listObj);
|
for (let i = 0, len = objKeyArr.length; i < len; i += 1) {
|
if (this.listObj[objKeyArr[i]].uid === uid) {
|
delete this.listObj[objKeyArr[i]];
|
return;
|
}
|
}
|
},
|
beforeUpload(file) {
|
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
const self = this;
|
const URL = window.URL || window.webkitURL;
|
const fileName = file.uid;
|
this.listObj[fileName] = {};
|
return new Promise((resolve) => {
|
const img = new Image();
|
img.src = URL.createObjectURL(file);
|
img.onload = function () {
|
self.listObj[fileName] = {
|
hasSuccess: false,
|
uid: file.uid,
|
width: this.width,
|
height: this.height,
|
};
|
};
|
resolve(true);
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.editor-slide-upload {
|
margin-bottom: 20px;
|
:deep(.el-upload--picture-card) {
|
width: 100%;
|
}
|
}
|
</style>
|
