From 6873611cf119934dbdd4037e69e88ece436ef889 Mon Sep 17 00:00:00 2001
From: baiyaaaaa <bigpet1991@gmail.com>
Date: Sun, 27 Nov 2016 14:31:33 +0800
Subject: [PATCH] dynamic default-file-list & doc improve

---
 examples/docs/en-US/upload.md | 27 +++++++++++++++++++++++++--
 examples/docs/zh-CN/upload.md | 29 ++++++++++++++++++++++++++---
 packages/upload/src/index.vue | 19 ++++++++++++-------
 3 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/examples/docs/en-US/upload.md b/examples/docs/en-US/upload.md
index 3197babd5..e6d9d4752 100644
--- a/examples/docs/en-US/upload.md
+++ b/examples/docs/en-US/upload.md
@@ -1,5 +1,10 @@
 <script>
   export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
     methods: {
       handleChange(file, fileList, event) {
         console.log(file, fileList, event);
@@ -37,12 +42,18 @@ Upload files by clicking or drag-and-drop
 <el-upload
   action="//jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
-  :on-remove="handleRemove">
+  :on-remove="handleRemove"
+  :default-file-list="fileList">
   <el-button size="small" type="primary">Click to upload</el-button>
   <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
 </el-upload>
 <script>
   export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
     methods: {
       handleRemove(file, fileList) {
         console.log(file, fileList);
@@ -70,6 +81,7 @@ You can drag your file to a certain area to upload it.
   :on-remove="handleRemove"
   :on-success="handleSuccess"
   :on-error="handleError"
+  :default-file-list="fileList"
 >
   <i class="el-icon-upload"></i>
   <div class="el-dragger__text">Drop file here or <em>click to upload</em></div>
@@ -77,6 +89,11 @@ You can drag your file to a certain area to upload it.
 </el-upload>
 <script>
   export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
     methods: {
       handleRemove(file, fileList) {
         console.log(file, fileList);
@@ -102,7 +119,7 @@ This mode is specifically for image uploading, and the thumbnail will display in
   :thumbnail-mode="true"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
-  :default-file-list="[{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]"
+  :default-file-list="fileList"
 >
   <i class="el-icon-upload"></i>
   <div class="el-dragger__text">Drop file here or <em>click to upload</em></div>
@@ -110,6 +127,11 @@ This mode is specifically for image uploading, and the thumbnail will display in
 </el-upload>
 <script>
   export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
     methods: {
       handleRemove(file, fileList) {
         console.log(file, fileList);
@@ -141,6 +163,7 @@ on-success | hook function when uploaded successfully | function(response, file,
 on-error | hook function when some errors occurs | function(err, response, file) | — | —
 before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` or a `Promise` is returned, uploading will be aborted | function(file) | — | —
 thumbnail-mode | whether thumbnail is displayed | boolean | — | false
+default-file-list | default uploaded files, i.e: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | []
 
 ### Events
 | Event Name | Description | Parameters |
diff --git a/examples/docs/zh-CN/upload.md b/examples/docs/zh-CN/upload.md
index bea5a9fe4..7b9f88181 100644
--- a/examples/docs/zh-CN/upload.md
+++ b/examples/docs/zh-CN/upload.md
@@ -10,6 +10,11 @@
 </style>
 <script>
   export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
     methods: {
       handleChange(file, fileList, event) {
         console.log(file, fileList, event);
@@ -48,12 +53,18 @@
 <el-upload
   action="//jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
-  :on-remove="handleRemove">
+  :on-remove="handleRemove"
+  :default-file-list="fileList">
   <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" @click="changeFiles">只能上传jpg/png文件，且不超过500kb</div>
 </el-upload>
 <script>
   export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
     methods: {
       handleRemove(file, fileList) {
         console.log(file, fileList);
@@ -81,6 +92,7 @@
   :on-remove="handleRemove"
   :on-success="handleSuccess"
   :on-error="handleError"
+  :default-file-list="fileList"
 >
   <i class="el-icon-upload"></i>
   <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
@@ -88,6 +100,11 @@
 </el-upload>
 <script>
   export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
     methods: {
       handleRemove(file, fileList) {
         console.log(file, fileList);
@@ -113,7 +130,7 @@
   :thumbnail-mode="true"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
-  :default-file-list="[{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]"
+  :default-file-list="fileList"
 >
   <i class="el-icon-upload"></i>
   <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
@@ -121,6 +138,11 @@
 </el-upload>
 <script>
   export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
     methods: {
       handleRemove(file, fileList) {
         console.log(file, fileList);
@@ -152,6 +174,7 @@
 | on-error | 可选参数, 文件上传失败时的钩子 | function(err, response, file) | — | — |
 | before-upload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。 | function(file) | — | — |
 | 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 | — | [] |
 
 ### Upload Methods
 | 方法名      | 说明          | 参数 |
diff --git a/packages/upload/src/index.vue b/packages/upload/src/index.vue
index 2b25f869f..101d66f7f 100644
--- a/packages/upload/src/index.vue
+++ b/packages/upload/src/index.vue
@@ -158,13 +158,18 @@ export default {
     }
   },
 
-  created() {
-    this.fileList = this.defaultFileList.map(item => {
-      item.status = 'finished';
-      item.percentage = 100;
-      item.uid = Date.now() + this.tempIndex++;
-      return item;
-    });
+  watch: {
+    defaultFileList: {
+      immediate: true,
+      handler(fileList) {
+        this.fileList = fileList.map(item => {
+          item.status = 'finished';
+          item.percentage = 100;
+          item.uid = Date.now() + this.tempIndex++;
+          return item;
+        });
+      }
+    }
   },
 
   render(h) {