Update multiple.vue
This commit is contained in:
parent
34415f3d4c
commit
a817ec68db
|
|
@ -1,6 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="sc-upload-multiple">
|
<div class="sc-upload-multiple">
|
||||||
|
|
||||||
<div class="sc-upload-list">
|
<div class="sc-upload-list">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(file, index) in fileList" :key="index">
|
<li v-for="(file, index) in fileList" :key="index">
|
||||||
|
|
@ -22,7 +21,6 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sc-upload-uploader">
|
<div class="sc-upload-uploader">
|
||||||
<el-upload ref="upload" class="uploader" :action="action" :accept="accept" multiple :show-file-list="false" :file-list="defaultFileList" :before-upload="before" :on-progress="progress" :on-success="success" :on-change="change" :on-remove="remove" :on-error="error">
|
<el-upload ref="upload" class="uploader" :action="action" :accept="accept" multiple :show-file-list="false" :file-list="defaultFileList" :before-upload="before" :on-progress="progress" :on-success="success" :on-change="change" :on-remove="remove" :on-error="error">
|
||||||
<div class="file-empty">
|
<div class="file-empty">
|
||||||
|
|
@ -31,7 +29,6 @@
|
||||||
</div>
|
</div>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-input v-model="value" style="display:none"></el-input>
|
<el-input v-model="value" style="display:none"></el-input>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -84,9 +81,7 @@
|
||||||
success_length += 1
|
success_length += 1
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
return success_length == all_length
|
return success_length == all_length
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -114,15 +109,17 @@
|
||||||
toStr(arr){
|
toStr(arr){
|
||||||
var _arr = [];
|
var _arr = [];
|
||||||
arr.forEach(item => {
|
arr.forEach(item => {
|
||||||
|
_arr.push(item.url)
|
||||||
_arr.push(item.url)
|
|
||||||
|
|
||||||
})
|
})
|
||||||
var str = _arr.join(",")
|
var str = _arr.join(",")
|
||||||
return str;
|
return str;
|
||||||
},
|
},
|
||||||
before(){
|
before(file){
|
||||||
|
const maxSize = file.size / 1024 / 1024 < this.maxSize;
|
||||||
|
if (!maxSize) {
|
||||||
|
this.$message.warning('上传文件大小不能超过 10MB!');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
change(file, fileList){
|
change(file, fileList){
|
||||||
file.tempImg = URL.createObjectURL(file.raw);
|
file.tempImg = URL.createObjectURL(file.raw);
|
||||||
|
|
@ -159,7 +156,7 @@
|
||||||
|
|
||||||
|
|
||||||
.sc-upload-list {display: inline-block;}
|
.sc-upload-list {display: inline-block;}
|
||||||
.sc-upload-list li {list-style: none;display: inline-block;width: 120px;height: 120px;margin-right: 10px;}
|
.sc-upload-list li {list-style: none;display: inline-block;width: 120px;height: 120px;margin-right: 10px;vertical-align: top;box-sizing: border-box;}
|
||||||
|
|
||||||
.sc-upload-item {position: relative;width: 100%;height: 100%;}
|
.sc-upload-item {position: relative;width: 100%;height: 100%;}
|
||||||
.sc-upload-item .mask {display: none;position: absolute;top:0px;right:0px;line-height: 1;z-index: 1;}
|
.sc-upload-item .mask {display: none;position: absolute;top:0px;right:0px;line-height: 1;z-index: 1;}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue