mirror of https://github.com/ElemeFE/element
upload rename defaultFileList to fileList
parent
7391c488a0
commit
461e5edbfd
|
@ -54,7 +54,7 @@
|
||||||
action="//jsonplaceholder.typicode.com/posts/"
|
action="//jsonplaceholder.typicode.com/posts/"
|
||||||
:on-preview="handlePreview"
|
:on-preview="handlePreview"
|
||||||
:on-remove="handleRemove"
|
:on-remove="handleRemove"
|
||||||
:default-file-list="fileList">
|
:file-list="fileList">
|
||||||
<el-button size="small" type="primary">点击上传</el-button>
|
<el-button size="small" type="primary">点击上传</el-button>
|
||||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
|
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
|
@ -92,7 +92,7 @@
|
||||||
:on-remove="handleRemove"
|
:on-remove="handleRemove"
|
||||||
:on-success="handleSuccess"
|
:on-success="handleSuccess"
|
||||||
:on-error="handleError"
|
:on-error="handleError"
|
||||||
:default-file-list="fileList"
|
:file-list="fileList"
|
||||||
>
|
>
|
||||||
<i class="el-icon-upload"></i>
|
<i class="el-icon-upload"></i>
|
||||||
<div class="el-dragger__text">将文件拖到此处,或<em>点击上传</em></div>
|
<div class="el-dragger__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||||
|
@ -130,7 +130,7 @@
|
||||||
:thumbnail-mode="true"
|
:thumbnail-mode="true"
|
||||||
:on-preview="handlePreview"
|
:on-preview="handlePreview"
|
||||||
:on-remove="handleRemove"
|
:on-remove="handleRemove"
|
||||||
:default-file-list="fileList"
|
:file-list="fileList"
|
||||||
>
|
>
|
||||||
<i class="el-icon-upload"></i>
|
<i class="el-icon-upload"></i>
|
||||||
<div class="el-dragger__text">将文件拖到此处,或<em>点击上传</em></div>
|
<div class="el-dragger__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||||
|
@ -175,7 +175,7 @@
|
||||||
| on-progress | 可选参数, 文件上传时的钩子 | function(event, file, fileList) | — | — |
|
| on-progress | 可选参数, 文件上传时的钩子 | function(event, file, fileList) | — | — |
|
||||||
| before-upload | 可选参数, 上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传。 | function(file) | — | — |
|
| before-upload | 可选参数, 上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传。 | function(file) | — | — |
|
||||||
| thumbnail-mode | 是否设置为图片模式,该模式下会显示图片缩略图 | boolean | — | false |
|
| thumbnail-mode | 是否设置为图片模式,该模式下会显示图片缩略图 | boolean | — | false |
|
||||||
| default-file-list | 默认已上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | [] |
|
| fileList | 默认已上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | [] |
|
||||||
|
|
||||||
### Methods
|
### Methods
|
||||||
| 方法名 | 说明 | 参数 |
|
| 方法名 | 说明 | 参数 |
|
||||||
|
|
|
@ -70,7 +70,7 @@ export default {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: noop
|
default: noop
|
||||||
},
|
},
|
||||||
defaultFileList: {
|
fileList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default() {
|
default() {
|
||||||
return [];
|
return [];
|
||||||
|
@ -80,7 +80,7 @@ export default {
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fileList: [],
|
_fileList: [],
|
||||||
dragOver: false,
|
dragOver: false,
|
||||||
draging: false,
|
draging: false,
|
||||||
tempIndex: 1
|
tempIndex: 1
|
||||||
|
@ -88,10 +88,10 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
defaultFileList: {
|
fileList: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler(fileList) {
|
handler(fileList) {
|
||||||
this.fileList = fileList.map(item => {
|
this._fileList = fileList.map(item => {
|
||||||
item.status = 'finished';
|
item.status = 'finished';
|
||||||
item.percentage = 100;
|
item.percentage = 100;
|
||||||
item.uid = Date.now() + this.tempIndex++;
|
item.uid = Date.now() + this.tempIndex++;
|
||||||
|
@ -120,11 +120,11 @@ export default {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.fileList.push(_file);
|
this._fileList.push(_file);
|
||||||
},
|
},
|
||||||
handleProgress(ev, file) {
|
handleProgress(ev, file) {
|
||||||
var _file = this.getFile(file);
|
var _file = this.getFile(file);
|
||||||
this.onProgress(ev, _file, this.fileList);
|
this.onProgress(ev, _file, this._fileList);
|
||||||
_file.percentage = ev.percent || 0;
|
_file.percentage = ev.percent || 0;
|
||||||
},
|
},
|
||||||
handleSuccess(res, file) {
|
handleSuccess(res, file) {
|
||||||
|
@ -134,7 +134,7 @@ export default {
|
||||||
_file.status = 'finished';
|
_file.status = 'finished';
|
||||||
_file.response = res;
|
_file.response = res;
|
||||||
|
|
||||||
this.onSuccess(res, _file, this.fileList);
|
this.onSuccess(res, _file, this._fileList);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
_file.showProgress = false;
|
_file.showProgress = false;
|
||||||
|
@ -143,7 +143,7 @@ export default {
|
||||||
},
|
},
|
||||||
handleError(err, response, file) {
|
handleError(err, response, file) {
|
||||||
var _file = this.getFile(file);
|
var _file = this.getFile(file);
|
||||||
var fileList = this.fileList;
|
var fileList = this._fileList;
|
||||||
|
|
||||||
_file.status = 'fail';
|
_file.status = 'fail';
|
||||||
|
|
||||||
|
@ -152,12 +152,12 @@ export default {
|
||||||
this.onError(err, response, file);
|
this.onError(err, response, file);
|
||||||
},
|
},
|
||||||
handleRemove(file) {
|
handleRemove(file) {
|
||||||
var fileList = this.fileList;
|
var fileList = this._fileList;
|
||||||
fileList.splice(fileList.indexOf(file), 1);
|
fileList.splice(fileList.indexOf(file), 1);
|
||||||
this.onRemove(file, fileList);
|
this.onRemove(file, fileList);
|
||||||
},
|
},
|
||||||
getFile(file) {
|
getFile(file) {
|
||||||
var fileList = this.fileList;
|
var fileList = this._fileList;
|
||||||
var target;
|
var target;
|
||||||
fileList.every(item => {
|
fileList.every(item => {
|
||||||
target = file.uid === item.uid ? item : null;
|
target = file.uid === item.uid ? item : null;
|
||||||
|
@ -171,7 +171,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
clearFiles() {
|
clearFiles() {
|
||||||
this.fileList = [];
|
this._fileList = [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue