Commit 16e54241 authored by 廖伟胜's avatar 廖伟胜

修改上传组件

parent 243c82f3
<template> <template>
<div> <div>
<el-upload ref="upload" :show-file-list="false" :on-preview="handler().handlePreview()" :list-type="listType" :on-exceed="(files, fileList)=>handler().handleExceed(files,fileList)" :drag="uploadStyle === 'drag' ? true : false" :limit="limit" :on-success="(file) => handler().imageSuccess(file)" :action="uploadDomain" :before-upload="init().beforeUpload" :multiple="multiple" :headers="headers" class="avatar-uploader" > <el-upload ref="upload-audio" :show-file-list="false" :on-preview="handler().handlePreview()" :list-type="listType" :on-exceed="(files, fileList)=>handler().handleExceed(files,fileList)" :drag="uploadStyle === 'drag' ? true : false" :limit="limit" :on-success="(file) => handler().imageSuccess(file)" :action="uploadDomain" :before-upload="init().beforeUpload" :multiple="multiple" :headers="headers" class="avatar-uploader" >
<!--音频--> <!--音频-->
<div v-if="list.length >0 && !isList" style="display:inline"> <div v-if="list.length >0 && !isList" style="display:inline">
<div v-for="(item,index) in list" :key="index" style="float:left;margin-right:10px;" @click.stop="handler().getIndex(index)" > <div v-for="(item,index) in list" :key="index" style="float:left;margin-right:10px;" @click.stop="handler().getIndex(index)" >
...@@ -388,7 +388,7 @@ export default{ ...@@ -388,7 +388,7 @@ export default{
src:link src:link
} }
this.data = this.list.push(attrs); this.data = this.list.push(attrs);
this.$refs.upload.clearFiles(); // this.$refs.upload.clearFiles();
}, },
//获取索引 //获取索引
getIndex:(index)=>{ getIndex:(index)=>{
...@@ -396,6 +396,8 @@ export default{ ...@@ -396,6 +396,8 @@ export default{
}, },
// 文件个数超出 // 文件个数超出
handleExceed:(file,fileList)=>{ handleExceed:(file,fileList)=>{
console.log(file,fileList);
this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
}, },
handlePreview:(file)=>{ handlePreview:(file)=>{
......
<template> <template>
<div> <div>
<el-upload ref="upload" :show-file-list="false" :on-preview="handler().handlePreview()" :list-type="listType" :on-exceed="(files, fileList)=>handler().handleExceed(files,fileList)" :drag="uploadStyle === 'drag' ? true : false" :limit="limit" :on-success="(file,files) => handler().imageSuccess(file,files)" :action="uploadDomain" :before-upload="init().beforeUpload" :multiple="multiple" :headers="headers" class="avatar-uploader" > <el-upload ref="upload-file" :show-file-list="false" :on-preview="handler().handlePreview()" :list-type="listType" :on-exceed="(files, fileList)=>handler().handleExceed(files,fileList)" :drag="uploadStyle === 'drag' ? true : false" :limit="limit" :on-success="(file,files) => handler().imageSuccess(file,files)" :action="uploadDomain" :before-upload="init().beforeUpload" :multiple="multiple" :headers="headers" class="avatar-uploader" >
<i class="el-icon-upload" v-if="uploadStyle === 'drag'"></i> <i class="el-icon-upload" v-if="uploadStyle === 'drag'"></i>
<div class="el-upload__text" v-if="uploadStyle === 'drag'">将文件拖到此处,或<em>点击上传</em></div> <div class="el-upload__text" v-if="uploadStyle === 'drag'">将文件拖到此处,或<em>点击上传</em></div>
<!--文件上传--> <!--文件上传-->
......
...@@ -95,8 +95,8 @@ export default{ ...@@ -95,8 +95,8 @@ export default{
return uploadDomain return uploadDomain
}, },
src() { src() {
const { data, imgDomain } = this const { data, imgDomain } = this
console.log(data);
const reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/ const reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
if (reg.test(data)) { if (reg.test(data)) {
......
<template> <template>
<div> <div>
<el-upload ref="upload" :show-file-list="false" :on-progress="(event, file)=>handler().uploadVideoProcess(event, file)" :list-type="listType" :on-exceed="(files)=>handler().handleExceed(files)" :drag="uploadStyle === 'drag' ? true : false" :limit="limit" :on-success="(file) => handler().imageSuccess(file)" :action="uploadDomain" :before-upload="init().beforeUpload" :multiple="multiple" :headers="headers" class="avatar-uploader" > <el-upload ref="upload-video" :show-file-list="false" :on-progress="(event, file)=>handler().uploadVideoProcess(event, file)" :list-type="listType" :on-exceed="(files)=>handler().handleExceed(files)" :drag="uploadStyle === 'drag' ? true : false" :limit="limit" :on-success="(data,file,fileList) => handler().imageSuccess(data,file,fileList)" :action="uploadDomain" :before-upload="init().beforeUpload" :multiple="multiple" :headers="headers" class="avatar-uploader" >
<!--视频--> <!--视频-->
<div v-if="list.length >0" style="display:inline" @click.stop="handler().getIndex(index)" > <div v-if="list.length >0" style="display:inline" @click.stop="handler().getIndex(index)" >
<div v-for="(item,index) in list" :key="index" style="float:left;" @click.stop="handler().getIndex(index)"> <div v-for="(item,index) in list" :key="index" style="float:left;" @click.stop="handler().getIndex(index)">
<div :style="style" class="avatar video-box" > <div :style="style" class="avatar video-box" >
<i class="el-icon-close delete-icon" title="删除" @click.stop="handler().handelDelete(index)"/> <i class="el-icon-close delete-icon" title="删除" @click.stop="handler().handelDelete(index)"/>
<video id="myVideo" <video id="myVideo"
:src="item.url" :src="item"
:autoplay="autoplay == true ? 'autoplay' : false" :autoplay="autoplay == true ? 'autoplay' : false"
:loop="loop == true ? 'loop' : false" :loop="loop == true ? 'loop' : false"
:controls="controls == true ? 'controls' : false" :controls="controls == true ? 'controls' : false"
...@@ -187,6 +187,10 @@ export default{ ...@@ -187,6 +187,10 @@ export default{
break break
} }
return uploadDomain return uploadDomain
},
computedDataType() {
const { dataType, limit } = this
return limit === 1 ? 'string' : dataType
}, },
src() { src() {
const { data, imgDomain } = this const { data, imgDomain } = this
...@@ -234,12 +238,11 @@ export default{ ...@@ -234,12 +238,11 @@ export default{
}, },
watch: { watch: {
value(value) { value(value) {
this.list = this.init().data(value) this.list = this.init().data(this.value);
}, },
data() { data() {
this.data = this.list; this.$emit('input', this.init().value(this.list))
this.$emit('input', this.init().value(this.data)) this.$emit('on-success', this.list)
this.$emit('on-success', this.data)
}, },
}, },
created() { created() {
...@@ -250,10 +253,10 @@ export default{ ...@@ -250,10 +253,10 @@ export default{
methods: { methods: {
init() { init() {
return { return {
// 初始化返回数据 // 初始化返回数据
value: (list) => { value: (list) => {
let value = '' let value = ''
const { dataType } = this const { computedDataType: dataType } = this
switch(dataType) { switch(dataType) {
case 'string': // 字符串类型以逗号隔开 case 'string': // 字符串类型以逗号隔开
value = list.join(',') value = list.join(',')
...@@ -269,17 +272,18 @@ export default{ ...@@ -269,17 +272,18 @@ export default{
}, },
// 初始化数据 // 初始化数据
data: (value) => { data: (value) => {
let data = '' let val = value;
const { dataType } = this let data = ''
const { computedDataType: dataType } = this
switch(dataType) { switch(dataType) {
case 'string': // 字符串类型以逗号隔开 case 'string': // 字符串类型以逗号隔开
data = value ? value.split(',') : [] // data = value ? value.split(',') : []
break break
case 'json': case 'json':
data = value ? JSON.parse(value) : [] data = val ? JSON.parse(val) : []
break break
case 'array': case 'array':
data = value data = val
break break
} }
data = Array.isArray(data) ? data : [] data = Array.isArray(data) ? data : []
...@@ -354,16 +358,14 @@ export default{ ...@@ -354,16 +358,14 @@ export default{
handler() { handler() {
return { return {
// 图片上传成功回调 // 图片上传成功回调
imageSuccess: (data,file) => { imageSuccess: (data,file,fileList) => {
const link = data.url; const link = data.url;
// this.data = url // this.data = url
let attr = {
url:link,
}
this.isShowUploadVideo = true; this.isShowUploadVideo = true;
this.videoFlag = false; this.videoFlag = false;
this.videoUploadPercent = 0; this.videoUploadPercent = 0;
this.data = this.index != null ? this.list.splice(this.index,1,attr) : this.list.push(attr); this.list.push(link);
this.data= this.list;
// this.$refs.upload.clearFiles(); // this.$refs.upload.clearFiles();
}, },
//进度条 //进度条
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
:label="label" :label="label"
:limit="limit" :limit="limit"
:edit="edit" :edit="edit"
v-model="value" v-model="data"
:showDel="showDel" :showDel="showDel"
:dialog="dialog" :dialog="dialog"
:data-type="dataType" :data-type="dataType"
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<UploadFile v-if="type === 'file'" <UploadFile v-if="type === 'file'"
:label="label" :label="label"
:limit="limit" :limit="limit"
v-model="value" v-model="data"
:edit="edit" :edit="edit"
:data-type="dataType" :data-type="dataType"
:dialog="dialog" :dialog="dialog"
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
:limit="limit" :limit="limit"
:edit="edit" :edit="edit"
:showDel="showDel" :showDel="showDel"
v-model="value" v-model="data"
:dialog="dialog" :dialog="dialog"
:data-type="dataType" :data-type="dataType"
:tips="tips" :tips="tips"
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
:limit="limit" :limit="limit"
:edit="edit" :edit="edit"
:showDel="showDel" :showDel="showDel"
v-model="value" v-model="data"
:dialog="dialog" :dialog="dialog"
:tips="tips" :tips="tips"
:source="source" :source="source"
...@@ -92,7 +92,7 @@ export default { ...@@ -92,7 +92,7 @@ export default {
}, },
limit: { // 图片上传数量限制,默认10 limit: { // 图片上传数量限制,默认10
type: Number, type: Number,
default: 10, default: 1,
}, },
value: { value: {
type: [String, Object, Array], type: [String, Object, Array],
...@@ -216,5 +216,57 @@ export default { ...@@ -216,5 +216,57 @@ export default {
default: false, default: false,
}, },
}, },
data(){
return{
data:'',
}
},
watch:{
value(value) {
this.data = value;
},
},
methods:{
init() {
return {
// 初始化返回数据
value: (list) => {
let value = ''
const { computedDataType: dataType } = this
switch(dataType) {
case 'string': // 字符串类型以逗号隔开
value = list.join(',')
break
case 'json':
value = JSON.stringify(list)
break
case 'array':
value = list
break
}
return value
},
// 初始化数据
data: (value) => {
let val = value;
let data = ''
const { computedDataType: dataType } = this
switch(dataType) {
case 'string': // 字符串类型以逗号隔开
// data = value ? value.split(',') : []
break
case 'json':
data = val ? JSON.parse(val) : []
break
case 'array':
data = val
break
}
data = Array.isArray(data) ? data : []
return data
},
}
},
},
} }
</script> </script>
...@@ -83,6 +83,37 @@ ...@@ -83,6 +83,37 @@
:size="(item.upload && item.upload.size) || 100" :size="(item.upload && item.upload.size) || 100"
:dataType="(item.upload && item.upload.dataType) || 'string'" :dataType="(item.upload && item.upload.dataType) || 'string'"
v-model="form[item.field]" /> --> v-model="form[item.field]" /> -->
<!-- <cyupload
:ref="form[item.field]"
v-model="form[item.field]"
:type="item.type"
:limit="item.limit|| 1"
:size="item.size || 100"
:dataType="item.dataType || 'array'"
:edit="item.edit || true"
:showDel="item.showDel || true"
:label="item.label || ''"
:multiple="item.multiple || false"
:tips="item.tips || ''"
:source="item.source || ''"
:fileType="item.fileType || ''"
:autoplay="item.autoplay || false"
:loop="item.loop || false"
:controls="item.controls || true"
:muted="item.muted || false"
:poster="item.poster || false"
:preload="item.preload || false"
:isList="item.isList || false"
:mini="item.mini || false"
:float="item.float || false"
:showLrc="item.showLrc || false"
:mutex="item.mutex || false"
:themeColor="item.themeColor"
:shuffle="item.shuffle || false"
:repeat="item.repeat"
:listMaxHeight="item.listMaxHeight"
:listFolded="item.listFolded || false"
/> -->
</div> </div>
<el-date-picker <el-date-picker
v-else-if="item.type === 'date'" v-else-if="item.type === 'date'"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment