UP sc-upload-file&sc-upload-multiple 支持对象数组的值
This commit is contained in:
sc
parent
2e958963ff
commit
98ad9c484b
|
|
@ -1,22 +1,22 @@
|
|||
<template>
|
||||
<div class="sc-upload-file">
|
||||
<el-upload
|
||||
:disabled="disabled"
|
||||
:auto-upload="autoUpload"
|
||||
:action="action"
|
||||
:name="name"
|
||||
:data="data"
|
||||
:http-request="request"
|
||||
:file-list="defaultFileList"
|
||||
:show-file-list="showFileList"
|
||||
:drag="drag"
|
||||
:accept="accept"
|
||||
:multiple="multiple"
|
||||
:limit="limit"
|
||||
:before-upload="before"
|
||||
:on-success="success"
|
||||
:on-error="error"
|
||||
:on-preview="handlePreview"
|
||||
<el-upload
|
||||
:disabled="disabled"
|
||||
:auto-upload="autoUpload"
|
||||
:action="action"
|
||||
:name="name"
|
||||
:data="data"
|
||||
:http-request="request"
|
||||
:file-list="defaultFileList"
|
||||
:show-file-list="showFileList"
|
||||
:drag="drag"
|
||||
:accept="accept"
|
||||
:multiple="multiple"
|
||||
:limit="limit"
|
||||
:before-upload="before"
|
||||
:on-success="success"
|
||||
:on-error="error"
|
||||
:on-preview="handlePreview"
|
||||
:on-exceed="handleExceed">
|
||||
<slot>
|
||||
<el-button type="primary" :disabled="disabled">Click to upload</el-button>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: { type: String, default: "" },
|
||||
modelValue: { type: [String, Array], default: "" },
|
||||
tip: { type: String, default: "" },
|
||||
action: { type: String, default: "" },
|
||||
apiObj: { type: Object, default: () => {} },
|
||||
|
|
@ -58,28 +58,35 @@
|
|||
},
|
||||
watch:{
|
||||
modelValue(val){
|
||||
if (val != this.toStr(this.defaultFileList)) {
|
||||
this.defaultFileList = this.toArr(val)
|
||||
this.value = val
|
||||
if(Array.isArray(val)){
|
||||
if (JSON.stringify(val) != JSON.stringify(this.formatArr(this.defaultFileList))) {
|
||||
this.defaultFileList = val
|
||||
this.value = val
|
||||
}
|
||||
}else{
|
||||
if (val != this.toStr(this.defaultFileList)) {
|
||||
this.defaultFileList = this.toArr(val)
|
||||
this.value = val
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultFileList: {
|
||||
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)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.defaultFileList = Array.isArray(this.modelValue) ? this.modelValue : this.toArr(this.modelValue)
|
||||
this.value = this.modelValue
|
||||
this.defaultFileList = this.toArr(this.modelValue)
|
||||
},
|
||||
methods: {
|
||||
//默认值转换为数组
|
||||
toArr(str){
|
||||
var _arr = [];
|
||||
var arr = str.split(",");
|
||||
var _arr = []
|
||||
var arr = str.split(",")
|
||||
arr.forEach(item => {
|
||||
if(item){
|
||||
var urlArr = item.split('/');
|
||||
|
|
@ -90,12 +97,25 @@
|
|||
})
|
||||
}
|
||||
})
|
||||
return _arr;
|
||||
return _arr
|
||||
},
|
||||
//数组转换为原始值
|
||||
toStr(arr){
|
||||
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){
|
||||
const maxSize = file.size / 1024 / 1024 < this.maxSize;
|
||||
if (!maxSize) {
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
<template>
|
||||
<div class="sc-upload-multiple">
|
||||
<el-upload ref="uploader" list-type="picture-card"
|
||||
:auto-upload="autoUpload"
|
||||
:disabled="disabled"
|
||||
:action="action"
|
||||
:name="name"
|
||||
:data="data"
|
||||
:http-request="request"
|
||||
:file-list="defaultFileList"
|
||||
:show-file-list="showFileList"
|
||||
:accept="accept"
|
||||
:multiple="multiple"
|
||||
:limit="limit"
|
||||
:before-upload="before"
|
||||
:on-success="success"
|
||||
:on-error="error"
|
||||
:on-preview="handlePreview"
|
||||
<el-upload ref="uploader" list-type="picture-card"
|
||||
:auto-upload="autoUpload"
|
||||
:disabled="disabled"
|
||||
:action="action"
|
||||
:name="name"
|
||||
:data="data"
|
||||
:http-request="request"
|
||||
:file-list="defaultFileList"
|
||||
:show-file-list="showFileList"
|
||||
:accept="accept"
|
||||
:multiple="multiple"
|
||||
:limit="limit"
|
||||
:before-upload="before"
|
||||
:on-success="success"
|
||||
:on-error="error"
|
||||
:on-preview="handlePreview"
|
||||
:on-exceed="handleExceed">
|
||||
<slot>
|
||||
<el-icon><el-icon-plus/></el-icon>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: { type: String, default: "" },
|
||||
modelValue: { type: [String, Array], default: "" },
|
||||
tip: { type: String, default: "" },
|
||||
action: { type: String, default: "" },
|
||||
apiObj: { type: Object, default: () => {} },
|
||||
|
|
@ -75,14 +75,21 @@
|
|||
},
|
||||
watch:{
|
||||
modelValue(val){
|
||||
if (val != this.toStr(this.defaultFileList)) {
|
||||
this.defaultFileList = this.toArr(val)
|
||||
this.value = val
|
||||
if(Array.isArray(val)){
|
||||
if (JSON.stringify(val) != JSON.stringify(this.formatArr(this.defaultFileList))) {
|
||||
this.defaultFileList = val
|
||||
this.value = val
|
||||
}
|
||||
}else{
|
||||
if (val != this.toStr(this.defaultFileList)) {
|
||||
this.defaultFileList = this.toArr(val)
|
||||
this.value = val
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultFileList: {
|
||||
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)
|
||||
},
|
||||
deep: true
|
||||
|
|
@ -94,8 +101,8 @@
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.defaultFileList = Array.isArray(this.modelValue) ? this.modelValue : this.toArr(this.modelValue)
|
||||
this.value = this.modelValue
|
||||
this.defaultFileList = this.toArr(this.modelValue)
|
||||
if(!this.disabled && this.draggable){
|
||||
this.rowDrop()
|
||||
}
|
||||
|
|
@ -121,6 +128,19 @@
|
|||
toStr(arr){
|
||||
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(){
|
||||
const _this = this
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@
|
|||
</sc-upload-file>
|
||||
</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="图片卡片示例(已开启拖拽排序)">
|
||||
<sc-upload-multiple v-model="fileurl2" draggable :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple>
|
||||
</el-card>
|
||||
|
|
@ -69,6 +75,16 @@
|
|||
data() {
|
||||
return {
|
||||
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",
|
||||
fileurl2: "img/auth_banner.jpg,img/avatar3.gif",
|
||||
fileurl3: "img/auth_banner.jpg",
|
||||
|
|
|
|||
Loading…
Reference in New Issue