Update multiple.vue

This commit is contained in:
sc 2021-05-21 09:28:03 +08:00
parent 34415f3d4c
commit a817ec68db
1 changed files with 8 additions and 11 deletions

View File

@ -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;}