Skip to content

C
cy-admin-ui
Commit 0f9fe073 authored by 廖伟胜's avatar 廖伟胜
Browse files
Options

修改上传文件组件结构

parent 1b956aa6
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1041 additions and 684 deletions
packages/form/upload/index.js
View file @ 0f9fe073
import Upload from './src/upload-img-list'; import Upload from './src/upload';
/* istanbul ignore next */ /* istanbul ignore next */
Upload.install = function(Vue) { Upload.install = function(Vue) {
......
packages/form/upload/src/base-upload.vue → packages/form/upload/src/upload-audio.vue
View file @ 0f9fe073
<template> <template>
<div> <div>
<el-upload ref="upload" :show-file-list="false" :on-preview="handler().handlePreview()" :on-progress="(event, file, fileList)=>handler().uploadVideoProcess(event, file, fileList)" :file-list="data" :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" :show-file-list="false" :on-preview="handler().handlePreview()" :file-list="data" :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="uploadType === 'image'" style="display:inline"> <!--音频-->
<div v-for="(item, index) in data" :key="index" style="float:left;" @click="handler().getIndex(index)"> <div v-if="data.length >0" style="display:inline">
<div :style="style" class="avatar" > <div v-for="(item,index) in data" :key="index" style="float:left;" @click.stop="handler().getIndex(index)" >
<i v-if="showDel" class="el-icon-close delete-icon" title="删除" @click.stop="data.splice(index, 1)"/> <div class="avatar" >
<div :style="`background-image:url(${item.url})`" class="img"/> <i class="el-icon-close delete-icon" title="删除" @click.stop="data.splice(index, 1)"/>
</div> <aplayer class="audio-player" :music="item"></aplayer>
</div> </div>
</div>
<div v-if="data.length >0 && uploadType === 'video'" style="display:inline" @click="handler().getIndex(index)" >
<div v-for="(item,index) in data" :key="index" style="float:left;">
<div :style="style" class="avatar" >
<i class="el-icon-close delete-icon" title="删除" @click.stop="data.splice(index, 1)"/>
<video id="myVideo"
:src="item.url"
class="avatar video-avatar video_text"
controls="controls">
您的浏览器不支持视频播放
</video>
</div> </div>
</div> </div>
<el-progress v-if="videoFlag == true"
type="circle" <!--图片和视频-->
:percentage="videoUploadPercent" <i :style="style" class="avatar el-icon-plus avatar-uploader-icon">
style="margin-top:7px;"></el-progress>
</div>
<i class="el-icon-upload" v-if="uploadStyle === 'drag'"></i>
<div class="el-upload__text" v-if="uploadStyle === 'drag'">将文件拖到此处，或<em>点击上传</em></div>
<el-button v-if="uploadStyle === 'button' || uploadType === 'file'" size="small" type="primary">点击上传</el-button>
<i v-else-if="uploadStyle === 'icon' || uploadType === 'image'" :style="style" class="avatar el-icon-plus avatar-uploader-icon">
<span class="upload-label">{{ label }}</span> <span class="upload-label">{{ label }}</span>
</i> </i>
</el-upload> <!--文件类型提示-->
<p class="Upload_pictures"> <div slot="tip" class="el-upload__tip" style="margin-top:15px">只能上传{{handler().listByString(fileType)}}文件，且不超过500kb</div>
<span></span> </el-upload>
<span>最多可以上传1个视频，建议大小50M，推荐格式mp4</span>
</p>
<!-- 文件列表 -->
<transition-group v-if="uploadType === 'file'" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="index" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in data">
<el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
{{file}}
<span class="el-icon-document"> {{ file.name }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
</div>
</li>
</transition-group>
<span class="upload-tips">{{ tips}}</span> <span class="upload-tips">{{ tips}}</span>
</div> </div>
</template> </template>
...@@ -60,6 +28,7 @@ import { mapState } from 'vuex' ...@@ -60,6 +28,7 @@ import { mapState } from 'vuex'
import { getToken } from '@/utils/auth' // 验权 import { getToken } from '@/utils/auth' // 验权
export default{ export default{
name:'uploadAudio',
props: { props: {
//上传文字描述 //上传文字描述
label: { label: {
...@@ -100,6 +69,10 @@ export default{ ...@@ -100,6 +69,10 @@ export default{
type: Boolean, type: Boolean,
default: true, default: true,
}, },
fileSize:{
type: Number,
default: 3
},
// 上传图片后是否显示图 // 上传图片后是否显示图
show: { show: {
type: Boolean, type: Boolean,
...@@ -212,11 +185,11 @@ export default{ ...@@ -212,11 +185,11 @@ export default{
}, },
}, },
watch: { watch: {
value() { value(value) {
this.data = this.value this.data = this.init().data(value)
}, },
data() { data() {
this.$emit('input', this.data) this.$emit('input', this.data)
this.$emit('on-success', this.data) this.$emit('on-success', this.data)
}, },
}, },
...@@ -224,27 +197,47 @@ export default{ ...@@ -224,27 +197,47 @@ export default{
this.index = null; this.index = null;
this.data = this.value this.data = this.value
this.init().token() this.init().token()
// if(this.uploadType === 'video'){
// this.handler().initVideo();
// }
}, },
methods: { methods: {
init() { init() {
return { return {
// 初始化返回数据
value: (list) => {
let value = ''
const { 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 data = ''
const { dataType } = this
switch(dataType) {
case 'string': // 字符串类型以逗号隔开
data = value ? value.split(',') : []
break
case 'json':
data = value ? JSON.parse(value) : []
break
case 'array':
data = value
break
}
data = Array.isArray(data) ? data : []
return data
},
// 上传前置操作 // 上传前置操作
beforeUpload: (file) => { beforeUpload: (file) => {
if(this.uploadType === 'video'){
var fileSize = file.size / 1024 / 1024 < 50;
if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
this.$message("请上传正确的视频格式");
return false;
}
if (!fileSize) {
this.$message("视频大小不能超过50MB");
return false;
}
this.isShowUploadVideo = false;
}
// 校检文件类型 // 校检文件类型
if (this.fileType) { if (this.fileType) {
let fileExtension = ""; let fileExtension = "";
...@@ -272,7 +265,7 @@ export default{ ...@@ -272,7 +265,7 @@ export default{
const { name } = file const { name } = file
let path = `${dayjs().format('YYYY/MM/DD')}/${dayjs().format('YYYYMMDDHHmmss')}${Math.ceil(Math.random() * 1000000 % 1000000)}` let path = `${dayjs().format('YYYY/MM/DD')}/${dayjs().format('YYYYMMDDHHmmss')}${Math.ceil(Math.random() * 1000000 % 1000000)}`
console.log('path', path) // console.log('path', path)
path = path.replace('(', '') path = path.replace('(', '')
path = path.replace(')', '') path = path.replace(')', '')
path = path.replace(' ', '') path = path.replace(' ', '')
...@@ -323,13 +316,6 @@ export default{ ...@@ -323,13 +316,6 @@ export default{
this.data = this.index != null ? this.data.splice(this.index,1,attr) : this.data.push(attr); this.data = this.index != null ? this.data.splice(this.index,1,attr) : this.data.push(attr);
this.$refs.upload.clearFiles(); this.$refs.upload.clearFiles();
}, },
//进度条
uploadVideoProcess:(event, file, fileList)=>{
if(this.uploadType === 'video'){
this.videoFlag = true;
this.videoUploadPercent = file.percentage.toFixed(0) * 1;
}
},
//获取索引 //获取索引
getIndex:(index)=>{ getIndex:(index)=>{
this.index = index; this.index = index;
...@@ -339,20 +325,18 @@ export default{ ...@@ -339,20 +325,18 @@ export default{
this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
}, },
handlePreview:(file)=>{ handlePreview:(file)=>{
console.log(file); // console.log(file);
}, },
initVideo:()=>{ //过滤数组
//初始化视频方法 listByString:(data)=>{
let myPlayer = this.$video(myVideo, { let attr = '';
//是否显示控制栏 if(typeof data == 'object' || typeof data == 'array'){
controls: true, data.map((item)=>{
//是否自动播放,muted:静音播放 attr+=item+'/'
autoplay: false, })
//是否静音播放 attr = attr.slice(0,attr.length-1);
muted:false, }
//是否流体自适应容器宽高 return attr
fluid:true,
});
}, },
// 获取文件名称 // 获取文件名称
getFileName:(name)=>{ getFileName:(name)=>{
......
packages/form/upload/src/upload-file.vue
View file @ 0f9fe073
This diff is collapsed.
packages/form/upload/src/upload-img-list.vue
View file @ 0f9fe073
...@@ -3,18 +3,14 @@ ...@@ -3,18 +3,14 @@
<div v-for="(item, index) in list" :key="index" class="avatar-uploader img"> <div v-for="(item, index) in list" :key="index" class="avatar-uploader img">
<div class="img-box" > <div class="img-box" >
<i v-if="edit" class="el-icon-close delete-icon" title="删除" @click.stop="list.splice(index, 1)"/> <i v-if="edit" class="el-icon-close delete-icon" title="删除" @click.stop="list.splice(index, 1)"/>
<uploadimg <UploadImg
v-model="list" v-model="list[index]"
:multiple="false" :multiple="false"
:show-del="false" :show-del="false"
:tips="tips" :tips="tips"
:source="source" :source="source"
:uploadstyle="uploadstyle"
:datatype="datatype"
:listtype="listtype"
:size="size" :size="size"
class="uploadimg"> class="uploadImg"/>
</uploadimg>
</div> </div>
</div> </div>
<div v-if="list.length < limit && edit" class="avatar-uploader" > <div v-if="list.length < limit && edit" class="avatar-uploader" >
...@@ -26,10 +22,6 @@ ...@@ -26,10 +22,6 @@
:tips="tips" :tips="tips"
:source="source" :source="source"
:size="size" :size="size"
v-model="value"
:dataType="dataType"
:uploadStyle="uploadStyle"
:listType="listType"
class="uploadImg" class="uploadImg"
@on-success="(e) => handler().upload(e)"/> @on-success="(e) => handler().upload(e)"/>
</div> </div>
...@@ -38,9 +30,8 @@ ...@@ -38,9 +30,8 @@
<script> <script>
import UploadImg from './upload-img' import UploadImg from './upload-img'
export default{ export default{
name: 'CyUploadImg', name: 'CyUploadImgList',
components: { components: {
UploadImg, UploadImg,
}, },
...@@ -51,10 +42,10 @@ export default{ ...@@ -51,10 +42,10 @@ export default{
}, },
limit: { // 图片上传数量限制，默认10 limit: { // 图片上传数量限制，默认10
type: Number, type: Number,
default: 10, default: 1,
}, },
value: { value: {
type: null, type: [String, Object, Array],
default: null, default: null,
}, },
edit: { // 是否可编辑 edit: { // 是否可编辑
...@@ -84,16 +75,6 @@ export default{ ...@@ -84,16 +75,6 @@ export default{
type: Number, type: Number,
default: 100, default: 100,
}, },
//上传组件风格
uploadStyle:{
type:String,
default:'icon'
},
//文件样式
listType:{
type:String,
default:''
},
}, },
data() { data() {
return { return {
...@@ -113,7 +94,7 @@ export default{ ...@@ -113,7 +94,7 @@ export default{
}, },
}, },
created() { created() {
this.list = this.init().data(this.value); this.list = this.init().data(this.value)
}, },
methods: { methods: {
init() { init() {
...@@ -188,6 +169,7 @@ export default{ ...@@ -188,6 +169,7 @@ export default{
<style lang="scss" scoped> <style lang="scss" scoped>
.upload-imags-list{ .upload-imags-list{
font-size: 0; font-size: 0;
overflow: auto;
.avatar-uploader{ .avatar-uploader{
display: block; display: block;
display: inline-block; display: inline-block;
......
packages/form/upload/src/upload-img.vue
View file @ 0f9fe073
This diff is collapsed.
packages/form/upload/src/upload-video.vue
View file @ 0f9fe073
This diff is collapsed.
packages/form/upload/src/upload.vue
View file @ 0f9fe073
<template> <template>
<div class="upload-imags-list"> <div>
<div class="img-box" > <UploadImageList
<UploadImg v-if="type === 'image'"
v-model="list" :label="label"
:multiple="multiple" :limit="limit"
:show-del="false" :edit="edit"
:tips="tips" v-model="value"
:limit="limit" :showDel="showDel"
:uploadType="uploadType" :dialog="dialog"
:showDel="showDel" :data-type="dataType"
:label="label" :multiple="multiple"
:source="source" :tips="tips"
:size="size" :source="source"
:edit="edit" :size="size"
:dialog="dialog" />
class="uploadImg"/> <UploadFile v-if="type === 'file'"
</div> :label="label"
:limit="limit"
v-model="value"
:edit="edit"
:dialog="dialog"
:data-type="dataType"
:tips="tips"
:source="source"
:size="size"
/>
<UploadVideo v-if="type === 'video'"
:label="label"
:limit="limit"
:edit="edit"
:showDel="showDel"
v-model="value"
:dialog="dialog"
:data-type="dataType"
:tips="tips"
:source="source"
:size="size"
/>
<UploadAudio v-if="type === 'audio'"
:label="label"
:limit="limit"
:edit="edit"
:showDel="showDel"
v-model="value"
:dialog="dialog"
:data-type="dataType"
:tips="tips"
:source="source"
:size="size"
/>
</div> </div>
</template> </template>
<script> <script>
import UploadImg from './base-upload' import UploadImageList from './upload-img-list'
import UploadFile from './upload-file'
export default{ import UploadVideo from './upload-video'
name: 'Upload', import UploadAudio from './upload-audio'
export default {
name: 'CyUpload',
components: { components: {
UploadImg, UploadImageList,
UploadFile,
UploadVideo,
UploadAudio,
}, },
props: { props: {
// 上传类型，可选值，image，file，video，audio
type: {
type: String,
default: 'image',
},
label: { label: {
type: String, type: String,
default: '上传', default: '上传',
}, },
limit: { // 文件上传数量限制，默认10 limit: { // 图片上传数量限制，默认10
type: Number, type: Number,
default: 10, default: 1,
},
//是否删除
showDel:{
type: Boolean,
default: true,
},
//上传类型
uploadType:{
type: String,
default: 'file'
}, },
value: { value: {
type: [String, Object, Array], type: [String, Object, Array],
default: null, default: null,
},
// 是否多选
multiple: {
type: Boolean,
default: false,
}, },
edit: { // 是否可编辑 edit: { // 是否可编辑
type: Boolean, type: Boolean,
default: true, default: true,
}, },
// 是否使用文件库组件 // 是否使用图片库组件
dialog: { dialog: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
//是否多选文件 //是否显示可删除
multiple:{ showDel: {
type: Boolean, type: Boolean,
default:false default: true,
}, },
// 文件列表数据结构，json，array，string // 图片列表数据结构，json，array，string
dataType: { dataType: {
type: String, type: String,
default: 'string', default: 'string',
...@@ -83,148 +120,6 @@ export default{ ...@@ -83,148 +120,6 @@ export default{
type: Number, type: Number,
default: 100, default: 100,
}, },
//上传组件风格
uploadStyle:{
type:String,
default:'icon'
},
//文件样式
listType:{
type:String,
default:''
},
},
data() {
return {
dialog_visible: false,
qiniuToken: '',
list: [], // 文件列表
index: '',
}
},
watch: {
value(value) {
this.list = this.init().data(value)
},
list(value) {
const data = this.init().value(value)
this.$emit('input', data)
},
},
created() {
this.list = this.init().data(this.value)
},
methods: {
init() {
return {
// 初始化返回数据
value: (list) => {
let value = ''
const { 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 data = ''
const { dataType } = this
if(value != null){
switch(dataType) {
case 'string': // 字符串类型以逗号隔开
data = value ? value.split(',') : []
break
case 'json':
data = value ? JSON.parse(value) : []
break
case 'array':
data = value
break
}
}
data = Array.isArray(data) ? data : []
return data
},
}
},
handler() {
return {
upload: (key) => {
this.list.push(key)
},
choiceImg: (index) => {
if (!this.edit) {
return
}
this.index = index
this.$refs.uploadImg.show()
},
confirm: (data) => {
const { index, limit } = this
let { list } = this
if (index === '') {
list = list.concat(data)
} else {
list.splice(index, 1, data)
}
this.list = list.slice(0, limit)
const value = this.init().value(this.list)
this.$emit('input', value)
},
}
},
}, },
} }
</script> </script>
<style lang="scss" scoped>
.upload-imags-list{
font-size: 0;
.avatar-uploader{
display: block;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
float: left;
.img-box{
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 4px;
position: relative;
.delete-icon{
position: absolute;
top: 0;
right: 0;
font-size: 16px;
background: red;
color: white;
border-radius: 4px;
z-index: 100;
cursor: pointer;
}
.img{
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
}
.avatar-uploader-icon{
box-sizing: border-box;
}
}
}
</style>
packages/layout/src/layout-form.vue
View file @ 0f9fe073
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<cyupload <cyupload
:ref="form[item.field]" :ref="form[item.field]"
v-model="form[item.field]" v-model="form[item.field]"
:uploadType="item.type" :type="item.type"
:limit="(item.upload && item.upload.limit) || 1" :limit="(item.upload && item.upload.limit) || 1"
:size="(item.upload && item.upload.size) || 100" :size="(item.upload && item.upload.size) || 100"
:dataType="(item.upload && item.upload.dataType) || 'array'" :dataType="(item.upload && item.upload.dataType) || 'array'"
...@@ -58,6 +58,7 @@ ...@@ -58,6 +58,7 @@
:multiple="(item.upload && item.upload.multiple) || false" :multiple="(item.upload && item.upload.multiple) || false"
:tips="(item.upload && item.upload.tips) || ''" :tips="(item.upload && item.upload.tips) || ''"
:source="(item.upload && item.upload.source) || ''" :source="(item.upload && item.upload.source) || ''"
:fileType="(item.upload && item.upload.fileType)"
/> />
<!-- <cy-upload <!-- <cy-upload
:ref="form[item.field]" :ref="form[item.field]"
...@@ -109,12 +110,10 @@ ...@@ -109,12 +110,10 @@
<script> <script>
import request from '@/utils/request' import request from '@/utils/request'
import { getDicts } from '@/api/system/dict/data' import { getDicts } from '@/api/system/dict/data'
import uploadImg from '../../form/upload/src/upload-img'
import uploadFile from '../../form/upload/src/upload-file'
import Cyupload from '../../form/upload/src/upload' import Cyupload from '../../form/upload/src/upload'
export default { export default {
components:{ components:{
uploadImg,uploadFile,Cyupload Cyupload
}, },
props: { props: {
primaryKey: { primaryKey: {
...@@ -260,8 +259,8 @@ export default { ...@@ -260,8 +259,8 @@ export default {
fieldList.forEach(item => { fieldList.forEach(item => {
const { field, type } = item const { field, type } = item
let { value, placeholder, attr, checkboxGroup,dict,options } = item let { value, placeholder, attr, checkboxGroup,dict,options } = item
console.log(options); // console.log(options);
console.log(value); // console.log(value);
attr = attr || {} attr = attr || {}
checkboxGroup = checkboxGroup || {} checkboxGroup = checkboxGroup || {}
if (!placeholder) { if (!placeholder) {
......
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