12
This commit is contained in:
dt_2916866708
79
src/components/CustomUpload.vue
Normal file
79
src/components/CustomUpload.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
:class="{hiedd:fileList.length>=limit}"
|
||||
:on-success="uploadSuccess"
|
||||
:file-list="fileList"
|
||||
:action="uploadUrl"
|
||||
:data="{ code: 'A001', ossKey: 'xingyou2', pathKey: 'banner-group', encrypt: 'PUBLIC' }" list-type="picture-card">
|
||||
<i slot="default" class="el-icon-plus"></i>
|
||||
<div slot="file" slot-scope="{file}">
|
||||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
||||
<i class="el-icon-zoom-in"></i>
|
||||
</span>
|
||||
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
|
||||
<i class="el-icon-delete"></i>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { number } from 'echarts/lib/export';
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
props:{
|
||||
limit:{
|
||||
type:Number,
|
||||
default:1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadUrl: process.env.VUE_APP_UPLOAD_URL,
|
||||
fileList: [],
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getFileList(){
|
||||
return this.fileList
|
||||
},
|
||||
uploadSuccess(response, file, fileList){
|
||||
let {publicUrl:url} = response.data;
|
||||
this.fileList.push( Object.assign(file,{url}) );
|
||||
},
|
||||
handleRemove(file) {
|
||||
this.fileList = this.fileList.filter(item=>item.name!==file.name)
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
handleDownload(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .hiedd .el-upload--picture-card{
|
||||
display:none !important; /* 上传按钮隐藏 */
|
||||
}
|
||||
.footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -4,7 +4,8 @@
|
||||
上传图片
|
||||
</el-button>
|
||||
<el-dialog :visible.sync="dialogVisible" append-to-body>
|
||||
<el-upload
|
||||
<Upload v-if="dialogVisible" ref="Upload" :limit="10"></Upload>
|
||||
<!-- <el-upload
|
||||
:multiple="true"
|
||||
:file-list="fileList"
|
||||
:show-file-list="true"
|
||||
@@ -12,19 +13,22 @@
|
||||
:on-success="handleSuccess"
|
||||
:before-upload="imgCompress"
|
||||
class="editor-slide-upload"
|
||||
action="https://httpbin.org/post"
|
||||
:action="uploadUrl"
|
||||
:data="{ code: 'A001', ossKey: 'xingyou2', pathKey: 'banner-group', encrypt: 'PUBLIC' }"
|
||||
list-type="picture-card"
|
||||
>
|
||||
<el-button size="small" type="primary">
|
||||
点击上传
|
||||
</el-button>
|
||||
</el-upload>
|
||||
<el-button @click="dialogVisible = false">
|
||||
</el-upload> -->
|
||||
<div style="margin-top: 20px;">
|
||||
<el-button @click="dialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -32,6 +36,7 @@
|
||||
<script>
|
||||
// import { getToken } from 'api/qiniu'
|
||||
import { imgCompress } from '@/utils'
|
||||
import Upload from './Upload.vue';
|
||||
|
||||
export default {
|
||||
name: 'EditorSlideUpload',
|
||||
@@ -41,8 +46,10 @@ export default {
|
||||
default: '#1890ff'
|
||||
}
|
||||
},
|
||||
components:{Upload},
|
||||
data() {
|
||||
return {
|
||||
uploadUrl: process.env.VUE_APP_UPLOAD_URL,
|
||||
imgCompress,
|
||||
dialogVisible: false,
|
||||
listObj: {},
|
||||
@@ -54,19 +61,23 @@ export default {
|
||||
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
|
||||
}
|
||||
let arr = this.$refs.Upload.getFileList();
|
||||
this.$emit('successCBK', arr)
|
||||
this.listObj = {}
|
||||
this.fileList = []
|
||||
this.dialogVisible = false
|
||||
// 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)
|
||||
const objKeyArr = Object.keys(this.listObj);
|
||||
console.log(objKeyArr,'objKeyArr')
|
||||
for (let i = 0, len = objKeyArr.length; i < len; i++) {
|
||||
if (this.listObj[objKeyArr[i]].uid === uid) {
|
||||
this.listObj[objKeyArr[i]].url = response.files.file
|
||||
|
||||
75
src/components/Tinymce/components/Upload.vue
Normal file
75
src/components/Tinymce/components/Upload.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
:class="{hiedd:fileList.length>=limit}"
|
||||
:on-success="uploadSuccess"
|
||||
:file-list="fileList"
|
||||
:action="uploadUrl"
|
||||
:data="{ code: 'A001', ossKey: 'xingyou2', pathKey: 'banner-group', encrypt: 'PUBLIC' }" list-type="picture-card">
|
||||
<i slot="default" class="el-icon-plus"></i>
|
||||
<div slot="file" slot-scope="{file}">
|
||||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
||||
<i class="el-icon-zoom-in"></i>
|
||||
</span>
|
||||
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
|
||||
<i class="el-icon-delete"></i>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
limit:{
|
||||
type:Number,
|
||||
default:1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadUrl: process.env.VUE_APP_UPLOAD_URL,
|
||||
fileList: [],
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getFileList(){
|
||||
return this.fileList
|
||||
},
|
||||
uploadSuccess(response, file, fileList){
|
||||
let {publicUrl:url} = response.data;
|
||||
this.fileList.push( Object.assign(file,{url}) );
|
||||
},
|
||||
handleRemove(file) {
|
||||
this.fileList = this.fileList.filter(item=>item.name!==file.name)
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
handleDownload(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .hiedd .el-upload--picture-card{
|
||||
display:none !important; /* 上传按钮隐藏 */
|
||||
}
|
||||
.footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -199,6 +199,7 @@ export default {
|
||||
window.tinymce.get(this.tinymceId).getContent()
|
||||
},
|
||||
imageSuccessCBK(arr) {
|
||||
console.log(arr,"imageSuccessCBK")
|
||||
const _this = this
|
||||
arr.forEach(v => {
|
||||
window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
|
||||
|
||||
@@ -1,21 +1,15 @@
|
||||
<template>
|
||||
<div class="photo-container">
|
||||
<div>
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="uploadUrl"
|
||||
:limit="1"
|
||||
:show-file-list="false"
|
||||
:on-success="uploadSuccess"
|
||||
:on-remove="removeUrl"
|
||||
:data="{ code: code, ossKey: 'xingyou2', pathKey: 'banner-group', encrypt: 'PUBLIC' }"
|
||||
>
|
||||
<el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
|
||||
:on-success="uploadSuccess" :on-remove="removeUrl"
|
||||
:data="{ code: code, ossKey: 'xingyou2', pathKey: 'banner-group', encrypt: 'PUBLIC' }">
|
||||
<img v-if="photoUrl" :src="photoUrl" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon" />
|
||||
</el-upload>
|
||||
<div @click="removeUrl" style="width: 100%;text-align: center;" v-if="photoUrl">
|
||||
<i style="font-size: 20px;" class="el-icon-delete" />
|
||||
</div>
|
||||
<slot name="button_footer" style="width: 100%;text-align: center;">
|
||||
<i @click="removeUrl" style="font-size: 20px;" v-if="photoUrl" class="el-icon-delete" />
|
||||
</slot>
|
||||
</div>
|
||||
<span class="upload-span">
|
||||
<slot name="bottom">{{ tip }}</slot>
|
||||
@@ -53,10 +47,10 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
photo: function(newVal, oldVal) {
|
||||
photo: function (newVal, oldVal) {
|
||||
this.photoUrl = newVal
|
||||
},
|
||||
isPrivate: function(newVal, oldVal) {
|
||||
isPrivate: function (newVal, oldVal) {
|
||||
this.changeUploadUrl
|
||||
}
|
||||
},
|
||||
@@ -72,7 +66,7 @@ export default {
|
||||
}
|
||||
},
|
||||
removeUrl(file, fileList) {
|
||||
this.$emit('success', '', { data: { publicUrl: '' }, code: 20000 })
|
||||
this.$emit('success', undefined, { data: { publicUrl: '' }, code: 20000 })
|
||||
},
|
||||
uploadSuccess(res, file) {
|
||||
if (res.code === 20000) {
|
||||
|
||||
Reference in New Issue
Block a user