upload rename defaultFileList to fileList

pull/2775/head
baiyaaaaa 2016-12-31 13:10:46 +08:00 committed by 杨奕
parent 7391c488a0
commit 461e5edbfd
2 changed files with 15 additions and 15 deletions

View File

@ -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
| 方法名 | 说明 | 参数 | | 方法名 | 说明 | 参数 |

View File

@ -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 = [];
} }
}, },