Skip to content

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

dynamic default-file-list & doc improve

parent e01e4206
Show whitespace changes
Inline Side-by-side
Showing with 63 additions and 12 deletions
examples/docs/en-US/upload.md
View file @ 6873611c
<script> <script>
export default { 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: { methods: {
handleChange(file, fileList, event) { handleChange(file, fileList, event) {
console.log(file, fileList, event); console.log(file, fileList, event);
...@@ -37,12 +42,18 @@ Upload files by clicking or drag-and-drop ...@@ -37,12 +42,18 @@ Upload files by clicking or drag-and-drop
<el-upload <el-upload
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">
<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 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() {
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: { methods: {
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(file, fileList); console.log(file, fileList);
...@@ -70,6 +81,7 @@ You can drag your file to a certain area to upload it. ...@@ -70,6 +81,7 @@ You can drag your file to a certain area to upload it.
:on-remove="handleRemove" :on-remove="handleRemove"
:on-success="handleSuccess" :on-success="handleSuccess"
:on-error="handleError" :on-error="handleError"
:default-file-list="fileList"
> >
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-dragger__text">Drop file here or <em>click to upload</em></div> <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. ...@@ -77,6 +89,11 @@ You can drag your file to a certain area to upload it.
</el-upload> </el-upload>
<script> <script>
export default { 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: { methods: {
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(file, fileList); console.log(file, fileList);
...@@ -102,7 +119,7 @@ This mode is specifically for image uploading, and the thumbnail will display in ...@@ -102,7 +119,7 @@ This mode is specifically for image uploading, and the thumbnail will display in
:thumbnail-mode="true" :thumbnail-mode="true"
:on-preview="handlePreview" :on-preview="handlePreview"
:on-remove="handleRemove" :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> <i class="el-icon-upload"></i>
<div class="el-dragger__text">Drop file here or <em>click to upload</em></div> <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 ...@@ -110,6 +127,11 @@ This mode is specifically for image uploading, and the thumbnail will display in
</el-upload> </el-upload>
<script> <script>
export default { 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: { methods: {
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(file, fileList); console.log(file, fileList);
...@@ -141,6 +163,7 @@ on-success | hook function when uploaded successfully | function(response, file, ...@@ -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) | — | — 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) | — | — 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 | — | []
### Events ### Events
| Event Name | Description | Parameters | | Event Name | Description | Parameters |
......
examples/docs/zh-CN/upload.md
View file @ 6873611c
...@@ -10,6 +10,11 @@ ...@@ -10,6 +10,11 @@
</style> </style>
<script> <script>
export default { 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: { methods: {
handleChange(file, fileList, event) { handleChange(file, fileList, event) {
console.log(file, fileList, event); console.log(file, fileList, event);
...@@ -48,12 +53,18 @@ ...@@ -48,12 +53,18 @@
<el-upload <el-upload
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">
<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" @click="changeFiles">只能上传jpg/png文件，且不超过500kb</div>
</el-upload> </el-upload>
<script> <script>
export default { 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: { methods: {
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(file, fileList); console.log(file, fileList);
...@@ -81,6 +92,7 @@ ...@@ -81,6 +92,7 @@
:on-remove="handleRemove" :on-remove="handleRemove"
:on-success="handleSuccess" :on-success="handleSuccess"
:on-error="handleError" :on-error="handleError"
:default-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>
...@@ -88,6 +100,11 @@ ...@@ -88,6 +100,11 @@
</el-upload> </el-upload>
<script> <script>
export default { 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: { methods: {
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(file, fileList); console.log(file, fileList);
...@@ -113,7 +130,7 @@ ...@@ -113,7 +130,7 @@
:thumbnail-mode="true" :thumbnail-mode="true"
:on-preview="handlePreview" :on-preview="handlePreview"
:on-remove="handleRemove" :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> <i class="el-icon-upload"></i>
<div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
...@@ -121,6 +138,11 @@ ...@@ -121,6 +138,11 @@
</el-upload> </el-upload>
<script> <script>
export default { 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: { methods: {
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(file, fileList); console.log(file, fileList);
...@@ -152,6 +174,7 @@ ...@@ -152,6 +174,7 @@
| on-error | 可选参数, 文件上传失败时的钩子 | function(err, response, file) | — | — | | on-error | 可选参数, 文件上传失败时的钩子 | function(err, response, file) | — | — |
| 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 | — | [] |
### Upload Methods ### Upload Methods
| 方法名 | 说明 | 参数 | | 方法名 | 说明 | 参数 |
......
packages/upload/src/index.vue
View file @ 6873611c
...@@ -158,13 +158,18 @@ export default { ...@@ -158,13 +158,18 @@ export default {
} }
}, },
created() { watch: {
this.fileList = this.defaultFileList.map(item => { defaultFileList: {
immediate: true,
handler(fileList) {
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++;
return item; return item;
}); });
}
}
}, },
render(h) { render(h) {
......
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