docs change

bd008bae · baiyaaaaa · 杨奕 · 1b4d69b1 · bd008bae · bd008bae
Commit bd008bae authored Feb 15, 2017 by baiyaaaaa Committed by 杨奕 Feb 16, 2017
Hide whitespace changes
Inline Side-by-side

Showing with 152 additions and 63 deletions

examples/docs/en-US/upload.md examples/docs/en-US/upload.md +136 -40

examples/docs/zh-CN/upload.md examples/docs/zh-CN/upload.md +16 -23

No files found.
--- a/examples/docs/en-US/upload.md
+++ b/examples/docs/en-US/upload.md
@@ -2,13 +2,19 @@
  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'}]
+        fileList: [{
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+          status: 'finished'
+        }, {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+          status: 'finished'
+        }],
+        imageUrl: ''
      };
    },
    methods: {
-      handleChange(file, fileList, event) {
-        console.log(file, fileList, event);
-      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
@@ -22,11 +28,23 @@
      handlePreview(file) {
        console.log(file);
      },
-      handleSuccess(file, fileList) {
-        console.log(file, fileList);
+      submitUpload() {
+        this.$refs.upload.submit();
      },
-      handleError(err, file, fileList) {
-        console.log(err);
+      handleAvatarScucess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('Avatar picture must be JPG format!');
+        }
+        if (!isLt2M) {
+          this.$message.error('Avatar picture size can not exceed 2MB!');
+        }
+        return isJPG && isLt2M;
      }
    }
  }
@@ -40,12 +58,13 @@ Upload files by clicking or drag-and-drop
 :::demo Customize upload button type and text using `slot`.
 ```html
 <el-upload
-  action="//jsonplaceholder.typicode.com/posts/"
+  class="upload-demo"
+  action="http://localhost:9000/upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
-  :default-file-list="fileList">
+  :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>
+  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
 </el-upload>
 <script>
  export default {
@@ -67,33 +86,65 @@ Upload files by clicking or drag-and-drop
 ```
 :::

-### Drag to upload
+### User avatar upload

-You can drag your file to a certain area to upload it.
+Use beforeUpload hook to limit the upload file format and size.

-:::demo Specifying the `type` attribute as `drag` will change the upload control to a drag-and-drop style. Additionally, you can use the `multiple` attribute to control whether uploading multiple files is permitted. `on-preview` and `on-remove` are hook functions that will be called after clicking on the uploaded file link and after clicking to remove the uploaded file, respectively.
+::: demo
 ```html
 <el-upload
-  action="//jsonplaceholder.typicode.com/posts/"
-  type="drag"
-  :multiple="true"
-  :on-preview="handlePreview"
-  :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>
-  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
+  class="avatar-uploader"
+  action="http://localhost:9000/upload"
+  :show-file-list="false"
+  :on-success="handleAvatarScucess"
+  :before-upload="beforeAvatarUpload">
+  <img v-if="imageUrl" :src="imageUrl" class="avatar">
+  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </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'}]
+        imageUrl: ''
      };
    },
+    methods: {
+      handleAvatarScucess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('Avatar picture must be JPG format!');
+        }
+        if (!isLt2M) {
+          this.$message.error('Avatar picture size can not exceed 2MB!');
+        }
+        return isJPG && isLt2M;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Photo Wall
+
+Use listType to change the fileList style.
+
+::: demo
+```html
+<el-upload
+  action="http://localhost:9000/upload"
+  list-type="picture-card"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove">
+  <i class="el-icon-plus"></i>
+</el-upload>
+<script>
+  export default {
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
@@ -107,23 +158,19 @@ You can drag your file to a certain area to upload it.
 ```
 :::

-### Upload single image
-
-This mode is specifically for image uploading, and the thumbnail will display in the origin place.
+### FileList with thumbnail

-:::demo `thumbnail-mode` attribute allows you to force the upload content to image only, and can display the thumbnail of the uploaded image.
+::: demo
 ```html
 <el-upload
-  action="//jsonplaceholder.typicode.com/posts/"
-  type="drag"
-  :thumbnail-mode="true"
+  class="upload-demo"
+  action="http://localhost:9000/upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
-  :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>
-  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
+  :file-list="fileList"
+  list-type="picture">
+  <el-button size="small" type="primary">Click to upload</el-button>
+  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
 </el-upload>
 <script>
  export default {
@@ -145,6 +192,52 @@ This mode is specifically for image uploading, and the thumbnail will display in
 ```
 :::

+### Drag to upload
+
+You can drag your file to a certain area to upload it.
+
+::: demo
+```html
+<el-upload
+  class="upload-demo"
+  drag
+  action="http://localhost:9000/upload"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove"
+  :file-list="fileList"
+  mutiple>
+  <i class="el-icon-upload"></i>
+  <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
+  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
+</el-upload>
+```
+:::
+
+### Manual upload
+
+::: demo
+```html
+<el-upload
+  class="upload-demo"
+  ref="upload"
+  action="http://localhost:9000/upload"
+  :auto-upload="false">
+  <el-button slot="trigger" size="small" type="primary">select file</el-button>
+  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>
+  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
+</el-upload>
+<script>
+  export default {
+    methods: {
+      submitUpload() {
+        this.$refs.upload.submit();
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributes
 Attribute      | Description          | Type      | Accepted Values       | Default
 ----| ----| ----| ----| ----
@@ -160,11 +253,14 @@ accept | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML
 on-preview | hook function when clicking the uploaded files | function(file) | — | —
 on-remove | hook function when files are removed | function(file, fileList) | — | —
 on-success | hook function when uploaded successfully | function(response, file, fileList) | — | —
-on-error | hook function when some errors occurs | function(err, response, file) | — | —
+on-error | hook function when some errors occurs | function(err, file, fileList) | — | —
 on-progress | hook function when some progress occurs | function(event, file, fileList) | — | — |
+on-change | hook function when file status change | function(file, fileList) | — | — |
 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 | — | []
+list-type | type of fileList | string | text/picture/picture-card | text |
+auto-upload | whether to auto upload file | boolean | — | true |

 ### Events
 | Event Name | Description | Parameters |

--- a/examples/docs/zh-CN/upload.md
+++ b/examples/docs/zh-CN/upload.md
@@ -55,9 +55,6 @@
      };
    },
    methods: {
-      handleChange(file, fileList, event) {
-        console.log(file, fileList, event);
-      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
@@ -71,12 +68,6 @@
      handlePreview(file) {
        console.log(file);
      },
-      handleSuccess(file, fileList) {
-        console.log(file, fileList);
-      },
-      handleError(err, file, fileList) {
-        console.log(err);
-      },
      submitUpload() {
        this.$refs.upload.submit();
      },
@@ -156,15 +147,24 @@
  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'}]
+        imageUrl: ''
      };
    },
    methods: {
-      handleRemove(file, fileList) {
-        console.log(file, fileList);
+      handleAvatarScucess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
      },
-      handlePreview(file) {
-        console.log(file);
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+        return isJPG && isLt2M;
      }
    }
  }
@@ -181,16 +181,12 @@
 <el-upload
  action="http://localhost:9000/upload"
  list-type="picture-card"
-  :on-preview="handlePreview">
+  :on-preview="handlePreview"
+  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
 </el-upload>
 <script>
  export default {
-    data() {
-      return {
-        fileList: []
-      };
-    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
@@ -246,9 +242,6 @@
  class="upload-demo"
  drag
  action="http://localhost:9000/upload"
-  :on-preview="handlePreview"
-  :on-remove="handleRemove"
-  :file-list="fileList"
  mutiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>