|
@@ -1,6 +1,16 @@
|
|
<template>
|
|
<template>
|
|
<div id="e-upload">
|
|
<div id="e-upload">
|
|
- <el-upload :action="url" :http-request="upload" :list-type="type" :fileList="fileList" :on-remove="onRemove">
|
|
|
|
|
|
+ <el-upload
|
|
|
|
+ :action="url"
|
|
|
|
+ :http-request="upload"
|
|
|
|
+ :list-type="type"
|
|
|
|
+ :fileList="fileList"
|
|
|
|
+ :on-remove="onRemove"
|
|
|
|
+ :on-error="onError"
|
|
|
|
+ :on-preview="onPreview"
|
|
|
|
+ :limit="limit"
|
|
|
|
+ :on-exceed="onExceed"
|
|
|
|
+ >
|
|
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
|
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
|
</el-upload>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
@@ -16,6 +26,7 @@ export default {
|
|
url: { type: String, required: true },
|
|
url: { type: String, required: true },
|
|
type: { type: String, default: 'picture-card' },
|
|
type: { type: String, default: 'picture-card' },
|
|
fileList: { type: Array },
|
|
fileList: { type: Array },
|
|
|
|
+ limit: { type: Number },
|
|
},
|
|
},
|
|
model: {
|
|
model: {
|
|
prop: 'fileList',
|
|
prop: 'fileList',
|
|
@@ -41,6 +52,18 @@ export default {
|
|
const index = this.fileList.findIndex(f => f.url === file.url);
|
|
const index = this.fileList.findIndex(f => f.url === file.url);
|
|
this.fileList.splice(index, 1);
|
|
this.fileList.splice(index, 1);
|
|
},
|
|
},
|
|
|
|
+ onError(err) {
|
|
|
|
+ this.$message.error(err);
|
|
|
|
+ },
|
|
|
|
+ // 点击事件
|
|
|
|
+ onPreview(file) {
|
|
|
|
+ const { url } = file;
|
|
|
|
+ window.open(url);
|
|
|
|
+ },
|
|
|
|
+ // 超出限制
|
|
|
|
+ onExceed() {
|
|
|
|
+ this.$message.error(`只能上传${this.limit}个文件`);
|
|
|
|
+ },
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
...mapState(['user', 'menuParams']),
|
|
...mapState(['user', 'menuParams']),
|