From 4fe557b5e88bf88ac6071e6094dfa0674451e35c Mon Sep 17 00:00:00 2001 From: wangshaobo Date: Tue, 12 Dec 2017 17:39:39 +0800 Subject: [PATCH] upload: add before-remove hook function --- examples/docs/en-US/upload.md | 22 +++++++++++++++++++++- examples/docs/zh-CN/upload.md | 22 +++++++++++++++++++++- packages/upload/src/index.vue | 29 +++++++++++++++++++++++++---- 3 files changed, 67 insertions(+), 6 deletions(-) diff --git a/examples/docs/en-US/upload.md b/examples/docs/en-US/upload.md index 2cee5de55..e4398ab29 100644 --- a/examples/docs/en-US/upload.md +++ b/examples/docs/en-US/upload.md @@ -116,6 +116,15 @@ }, handleExceed(files, fileList) { this.$message.warning(`You can upload up to 3 files. You selected ${files.length} files this time, and ${files.length + fileList.length} files totally`); + }, + handleBeforeRemove(file, fileList) { + return new Promise((resolve, reject) => { + if (confirm('It looks good, are you sure to remove?')) { + resolve() + } else { + reject() + } + }); } } } @@ -126,13 +135,14 @@ Upload files by clicking or drag-and-drop ### Click to upload files -:::demo Customize upload button type and text using `slot`. Set `limit` and `on-exceed` to limit the maximum number of uploads allowed and specify method when the limit is exceeded. +:::demo Customize upload button type and text using `slot`. Set `limit` and `on-exceed` to limit the maximum number of uploads allowed and specify method when the limit is exceeded. Set `before-remove` is able to abort the remove operation. ```html { + if (confirm('It looks good, are you sure to remove?')) { + resolve() + } else { + reject() + } + }); } } } @@ -410,6 +429,7 @@ 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 select file or upload file success or upload file fail | function(file, fileList) | — | — | before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted | function(file) | — | — +before-remove | hook function before removing a file with the file and file list as its parameters. If `false` is returned or a `Promise` is returned and then is rejected, remove will be aborted. | function(file, fileList) | — | — | thumbnail-mode | whether thumbnail is displayed | boolean | — | false file-list | default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] list-type | type of fileList | string | text/picture/picture-card | text | diff --git a/examples/docs/zh-CN/upload.md b/examples/docs/zh-CN/upload.md index 919a225ce..b6f402794 100644 --- a/examples/docs/zh-CN/upload.md +++ b/examples/docs/zh-CN/upload.md @@ -115,6 +115,15 @@ }, handleExceed(files, fileList) {        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); + }, + handleBeforeRemove(file, fileList) { + return new Promise((resolve, reject) => { + if (confirm('It looks good, are you sure to remove?')) { + resolve() + } else { + reject() + } + }); } } } @@ -126,13 +135,14 @@ ### 点击上传 -:::demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置 `limit` 和 `on-exceed` 来限制上传文件的个数和定义超出限制时的行为。 +:::demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置 `limit` 和 `on-exceed` 来限制上传文件的个数和定义超出限制时的行为。可通过设置 `before-remove` 来阻止删除操作。 ```html { + if (confirm('It looks good, are you sure to remove?')) { + resolve() + } else { + reject() + } + }); } } } @@ -419,6 +438,7 @@ | on-progress | 文件上传时的钩子 | function(event, file, fileList) | — | — | | on-change | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) | — | — | | before-upload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file) | — | — | +| before-remove | 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。| function(file, fileList) | — | — | | list-type | 文件列表的类型 | string | text/picture/picture-card | text | | auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true | | file-list | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] | diff --git a/packages/upload/src/index.vue b/packages/upload/src/index.vue index 85c441335..6a9034f7c 100644 --- a/packages/upload/src/index.vue +++ b/packages/upload/src/index.vue @@ -53,6 +53,7 @@ export default { default: 'select' }, beforeUpload: Function, + beforeRemove: Function, onRemove: { type: Function, default: noop @@ -175,10 +176,30 @@ export default { if (raw) { file = this.getFile(raw); } - this.abort(file); - let fileList = this.uploadFiles; - fileList.splice(fileList.indexOf(file), 1); - this.onRemove(file, fileList); + let doRemove = () => { + this.abort(file); + let fileList = this.uploadFiles; + fileList.splice(fileList.indexOf(file), 1); + this.onRemove(file, fileList); + }; + + if (!this.beforeRemove) { + doRemove(); + return; + } + + const before = this.beforeRemove(file, this.uploadFiles); + if (before && before.then) { + before.then(() => { + doRemove(); + }, () => { + // do nothing + }); + } else if (before !== false) { + doRemove(); + } else { + // do nothing + } }, getFile(rawFile) { let fileList = this.uploadFiles;