Skip to content

E
Element
Commit bd008bae authored by baiyaaaaa's avatar baiyaaaaa Committed by 杨奕
Browse files
Options

docs change

parent 1b4d69b1
Hide whitespace changes
Inline Side-by-side
Showing with 152 additions and 63 deletions
examples/docs/en-US/upload.md
View file @ bd008bae
...@@ -2,13 +2,19 @@ ...@@ -2,13 +2,19 @@
export default { export default {
data() { data() {
return { 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: { methods: {
handleChange(file, fileList, event) {
console.log(file, fileList, event);
},
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(file, fileList); console.log(file, fileList);
}, },
...@@ -22,11 +28,23 @@ ...@@ -22,11 +28,23 @@
handlePreview(file) { handlePreview(file) {
console.log(file); console.log(file);
}, },
handleSuccess(file, fileList) { submitUpload() {
console.log(file, fileList); this.$refs.upload.submit();
}, },
handleError(err, file, fileList) { handleAvatarScucess(res, file) {
console.log(err); 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 ...@@ -40,12 +58,13 @@ Upload files by clicking or drag-and-drop
:::demo Customize upload button type and text using `slot`. :::demo Customize upload button type and text using `slot`.
```html ```html
<el-upload <el-upload
action="//jsonplaceholder.typicode.com/posts/" class="upload-demo"
action="http://localhost:9000/upload"
: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">Click to upload</el-button> <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> </el-upload>
<script> <script>
export default { export default {
...@@ -67,33 +86,65 @@ Upload files by clicking or drag-and-drop ...@@ -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 ```html
<el-upload <el-upload
action="//jsonplaceholder.typicode.com/posts/" class="avatar-uploader"
type="drag" action="http://localhost:9000/upload"
:multiple="true" :show-file-list="false"
:on-preview="handlePreview" :on-success="handleAvatarScucess"
:on-remove="handleRemove" :before-upload="beforeAvatarUpload">
:on-success="handleSuccess" <img v-if="imageUrl" :src="imageUrl" class="avatar">
:on-error="handleError" <i v-else class="el-icon-plus avatar-uploader-icon"></i>
: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>
</el-upload> </el-upload>
<script> <script>
export default { export default {
data() { data() {
return { 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: { methods: {
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(file, fileList); console.log(file, fileList);
...@@ -107,23 +158,19 @@ You can drag your file to a certain area to upload it. ...@@ -107,23 +158,19 @@ You can drag your file to a certain area to upload it.
``` ```
::: :::
### Upload single image ### FileList with thumbnail
This mode is specifically for image uploading, and the thumbnail will display in the origin place.
:::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 ```html
<el-upload <el-upload
action="//jsonplaceholder.typicode.com/posts/" class="upload-demo"
type="drag" action="http://localhost:9000/upload"
:thumbnail-mode="true"
:on-preview="handlePreview" :on-preview="handlePreview"
:on-remove="handleRemove" :on-remove="handleRemove"
:default-file-list="fileList" :file-list="fileList"
> list-type="picture">
<i class="el-icon-upload"></i> <el-button size="small" type="primary">Click to upload</el-button>
<div class="el-dragger__text">Drop file here or <em>click to upload</em></div> <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
<div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
</el-upload> </el-upload>
<script> <script>
export default { export default {
...@@ -145,6 +192,52 @@ This mode is specifically for image uploading, and the thumbnail will display in ...@@ -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 ### Attributes
Attribute | Description | Type | Accepted Values | Default Attribute | Description | Type | Accepted Values | Default
----| ----| ----| ----| ---- ----| ----| ----| ----| ----
...@@ -160,11 +253,14 @@ accept | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML ...@@ -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-preview | hook function when clicking the uploaded files | function(file) | — | —
on-remove | hook function when files are removed | function(file, fileList) | — | — on-remove | hook function when files are removed | function(file, fileList) | — | —
on-success | hook function when uploaded successfully | function(response, 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-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) | — | — 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 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 | — | [] 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 ### Events
| Event Name | Description | Parameters | | Event Name | Description | Parameters |
......
examples/docs/zh-CN/upload.md
View file @ bd008bae
...@@ -55,9 +55,6 @@ ...@@ -55,9 +55,6 @@
}; };
}, },
methods: { methods: {
handleChange(file, fileList, event) {
console.log(file, fileList, event);
},
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(file, fileList); console.log(file, fileList);
}, },
...@@ -71,12 +68,6 @@ ...@@ -71,12 +68,6 @@
handlePreview(file) { handlePreview(file) {
console.log(file); console.log(file);
}, },
handleSuccess(file, fileList) {
console.log(file, fileList);
},
handleError(err, file, fileList) {
console.log(err);
},
submitUpload() { submitUpload() {
this.$refs.upload.submit(); this.$refs.upload.submit();
}, },
...@@ -156,15 +147,24 @@ ...@@ -156,15 +147,24 @@
export default { export default {
data() { data() {
return { 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: { methods: {
handleRemove(file, fileList) { handleAvatarScucess(res, file) {
console.log(file, fileList); this.imageUrl = URL.createObjectURL(file.raw);
}, },
handlePreview(file) { beforeAvatarUpload(file) {
console.log(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 @@ ...@@ -181,16 +181,12 @@
<el-upload <el-upload
action="http://localhost:9000/upload" action="http://localhost:9000/upload"
list-type="picture-card" list-type="picture-card"
:on-preview="handlePreview"> :on-preview="handlePreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
</el-upload> </el-upload>
<script> <script>
export default { export default {
data() {
return {
fileList: []
};
},
methods: { methods: {
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(file, fileList); console.log(file, fileList);
...@@ -246,9 +242,6 @@ ...@@ -246,9 +242,6 @@
class="upload-demo" class="upload-demo"
drag drag
action="http://localhost:9000/upload" action="http://localhost:9000/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
mutiple> mutiple>
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment