zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP sc-upload-file&sc-upload-multiple 支持对象数组的值

This commit is contained in:
sc 2022-06-15 15:09:15 +08:00
parent 2e958963ff
commit 98ad9c484b
3 changed files with 104 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/scUpload/file.vue
View File

@ -1,22 +1,22 @@
<template> <template>
<div class="sc-upload-file"> <div class="sc-upload-file">
<el-upload <el-upload
:disabled="disabled" :disabled="disabled"
:auto-upload="autoUpload" :auto-upload="autoUpload"
:action="action" :action="action"
:name="name" :name="name"
:data="data" :data="data"
:http-request="request" :http-request="request"
:file-list="defaultFileList" :file-list="defaultFileList"
:show-file-list="showFileList" :show-file-list="showFileList"
:drag="drag" :drag="drag"
:accept="accept" :accept="accept"
:multiple="multiple" :multiple="multiple"
:limit="limit" :limit="limit"
:before-upload="before" :before-upload="before"
:on-success="success" :on-success="success"
:on-error="error" :on-error="error"
:on-preview="handlePreview" :on-preview="handlePreview"
:on-exceed="handleExceed"> :on-exceed="handleExceed">
<slot> <slot>
<el-button type="primary" :disabled="disabled">Click to upload</el-button> <el-button type="primary" :disabled="disabled">Click to upload</el-button>
@ -34,7 +34,7 @@
export default { export default {
props: { props: {
modelValue: { type: String, default: "" }, modelValue: { type: [String, Array], default: "" },
tip: { type: String, default: "" }, tip: { type: String, default: "" },
action: { type: String, default: "" }, action: { type: String, default: "" },
apiObj: { type: Object, default: () => {} }, apiObj: { type: Object, default: () => {} },
@ -58,28 +58,35 @@
}, },
watch:{ watch:{
modelValue(val){ modelValue(val){
if (val != this.toStr(this.defaultFileList)) { if(Array.isArray(val)){
this.defaultFileList = this.toArr(val) if (JSON.stringify(val) != JSON.stringify(this.formatArr(this.defaultFileList))) {
this.value = val this.defaultFileList = val
this.value = val
}
}else{
if (val != this.toStr(this.defaultFileList)) {
this.defaultFileList = this.toArr(val)
this.value = val
}
} }
}, },
defaultFileList: { defaultFileList: {
handler(val){ handler(val){
this.$emit('update:modelValue', this.toStr(val)) this.$emit('update:modelValue', Array.isArray(this.modelValue) ? this.formatArr(val) : this.toStr(val))
this.value = this.toStr(val) this.value = this.toStr(val)
}, },
deep: true deep: true
} }
}, },
mounted() { mounted() {
this.defaultFileList = Array.isArray(this.modelValue) ? this.modelValue : this.toArr(this.modelValue)
this.value = this.modelValue this.value = this.modelValue
this.defaultFileList = this.toArr(this.modelValue)
}, },
methods: { methods: {
//默认值转换为数组 //默认值转换为数组
toArr(str){ toArr(str){
var _arr = []; var _arr = []
var arr = str.split(","); var arr = str.split(",")
arr.forEach(item => { arr.forEach(item => {
if(item){ if(item){
var urlArr = item.split('/'); var urlArr = item.split('/');
@ -90,12 +97,25 @@
}) })
} }
}) })
return _arr; return _arr
}, },
//数组转换为原始值 //数组转换为原始值
toStr(arr){ toStr(arr){
return arr.map(v => v.url).join(",") return arr.map(v => v.url).join(",")
}, },
//格式化数组值
formatArr(arr){
var _arr = []
arr.forEach(item => {
if(item){
_arr.push({
name: item.name,
url: item.url
})
}
})
return _arr
},
before(file){ before(file){
const maxSize = file.size / 1024 / 1024 < this.maxSize; const maxSize = file.size / 1024 / 1024 < this.maxSize;
if (!maxSize) { if (!maxSize) {

64
src/components/scUpload/multiple.vue
View File

@ -1,21 +1,21 @@
<template> <template>
<div class="sc-upload-multiple"> <div class="sc-upload-multiple">
<el-upload ref="uploader" list-type="picture-card" <el-upload ref="uploader" list-type="picture-card"
:auto-upload="autoUpload" :auto-upload="autoUpload"
:disabled="disabled" :disabled="disabled"
:action="action" :action="action"
:name="name" :name="name"
:data="data" :data="data"
:http-request="request" :http-request="request"
:file-list="defaultFileList" :file-list="defaultFileList"
:show-file-list="showFileList" :show-file-list="showFileList"
:accept="accept" :accept="accept"
:multiple="multiple" :multiple="multiple"
:limit="limit" :limit="limit"
:before-upload="before" :before-upload="before"
:on-success="success" :on-success="success"
:on-error="error" :on-error="error"
:on-preview="handlePreview" :on-preview="handlePreview"
:on-exceed="handleExceed"> :on-exceed="handleExceed">
<slot> <slot>
<el-icon><el-icon-plus/></el-icon> <el-icon><el-icon-plus/></el-icon>
@ -51,7 +51,7 @@
export default { export default {
props: { props: {
modelValue: { type: String, default: "" }, modelValue: { type: [String, Array], default: "" },
tip: { type: String, default: "" }, tip: { type: String, default: "" },
action: { type: String, default: "" }, action: { type: String, default: "" },
apiObj: { type: Object, default: () => {} }, apiObj: { type: Object, default: () => {} },
@ -75,14 +75,21 @@
}, },
watch:{ watch:{
modelValue(val){ modelValue(val){
if (val != this.toStr(this.defaultFileList)) { if(Array.isArray(val)){
this.defaultFileList = this.toArr(val) if (JSON.stringify(val) != JSON.stringify(this.formatArr(this.defaultFileList))) {
this.value = val this.defaultFileList = val
this.value = val
}
}else{
if (val != this.toStr(this.defaultFileList)) {
this.defaultFileList = this.toArr(val)
this.value = val
}
} }
}, },
defaultFileList: { defaultFileList: {
handler(val){ handler(val){
this.$emit('update:modelValue', this.toStr(val)) this.$emit('update:modelValue', Array.isArray(this.modelValue) ? this.formatArr(val) : this.toStr(val))
this.value = this.toStr(val) this.value = this.toStr(val)
}, },
deep: true deep: true
@ -94,8 +101,8 @@
} }
}, },
mounted() { mounted() {
this.defaultFileList = Array.isArray(this.modelValue) ? this.modelValue : this.toArr(this.modelValue)
this.value = this.modelValue this.value = this.modelValue
this.defaultFileList = this.toArr(this.modelValue)
if(!this.disabled && this.draggable){ if(!this.disabled && this.draggable){
this.rowDrop() this.rowDrop()
} }
@ -121,6 +128,19 @@
toStr(arr){ toStr(arr){
return arr.map(v => v.url).join(",") return arr.map(v => v.url).join(",")
}, },
//格式化数组值
formatArr(arr){
var _arr = []
arr.forEach(item => {
if(item){
_arr.push({
name: item.name,
url: item.url
})
}
})
return _arr
},
//拖拽 //拖拽
rowDrop(){ rowDrop(){
const _this = this const _this = this

16
src/views/vab/upload.vue
View File

@ -6,6 +6,12 @@
</sc-upload-file> </sc-upload-file>
</el-card> </el-card>
<el-card shadow="never" header="文件示例(值为对象数组,适合保存原始文件名)">
<sc-upload-file v-model="fileurlArr" :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件">
<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
</sc-upload-file>
</el-card>
<el-card shadow="never" header="图片卡片示例(已开启拖拽排序)"> <el-card shadow="never" header="图片卡片示例(已开启拖拽排序)">
<sc-upload-multiple v-model="fileurl2" draggable :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple> <sc-upload-multiple v-model="fileurl2" draggable :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple>
</el-card> </el-card>
@ -69,6 +75,16 @@
data() { data() {
return { return {
uploadApi: this.$API.common.upload, uploadApi: this.$API.common.upload,
fileurlArr: [
{
name: '销售合同模板.xlsx',
url: 'http://www.scuiadmin.com/files/220000198611262243.xlsx'
},
{
name: '企业员工联系方式.xlsx',
url: 'http://www.scuiadmin.com/files/350000201004261875.xlsx',
}
],
fileurl: "http://www.scuiadmin.com/files/220000198611262243.xlsx,http://www.scuiadmin.com/files/350000201004261875.xlsx", fileurl: "http://www.scuiadmin.com/files/220000198611262243.xlsx,http://www.scuiadmin.com/files/350000201004261875.xlsx",
fileurl2: "img/auth_banner.jpg,img/avatar3.gif", fileurl2: "img/auth_banner.jpg,img/avatar3.gif",
fileurl3: "img/auth_banner.jpg", fileurl3: "img/auth_banner.jpg",