diff --git a/src/style/var.less b/src/style/var.less index 11e8eeca6..4e8f0ac10 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -781,6 +781,10 @@ @uploader-file-name-margin-top: @padding-xs; @uploader-file-name-font-size: @font-size-sm; @uploader-file-name-text-color: @gray-7; +@uploader-mask-background-color: fade(@gray-8, 88%); +@uploader-mask-icon-size: 22px; +@uploader-mask-message-font-size: @font-size-sm; +@uploader-mask-message-line-height: 14px; // Sku @sku-item-background-color: @background-color; diff --git a/src/uploader/README.md b/src/uploader/README.md index 603e39a44..2b62e02d9 100644 --- a/src/uploader/README.md +++ b/src/uploader/README.md @@ -45,6 +45,28 @@ export default { }; ``` +### Failed + +```html + +``` + +```js +export default { + data() { + return { + fileList: [] + } + }, + methods: { + afterRead(file) { + file.status = 'failed'; + file.message = 'Failed'; + } + } +}; +``` + ### Max Count ```html diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index 54a1bb7fa..89ee41de0 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -30,9 +30,9 @@ export default { }; ``` -### 图片预览 +### 文件预览 -通过`v-model`可以绑定已经上传的图片列表，并展示图片列表的预览图 +通过`v-model`可以绑定已经上传的文件列表，并展示文件列表的预览图 ```html @@ -53,6 +53,30 @@ export default { }; ``` +### 上传失败 + +将 file 的`status`设置为`failed`表示文件上传失败 + +```html + +``` + +```js +export default { + data() { + return { + fileList: [] + } + }, + methods: { + afterRead(file) { + file.status = 'failed'; + file.message = '上传失败'; + } + } +}; +``` + ### 限制上传数量 通过`max-count`属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域 @@ -81,7 +105,7 @@ export default { ```html - 上传图片 + 上传文件 ``` diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue index c21e9319a..d0f8614a4 100644 --- a/src/uploader/demo/index.vue +++ b/src/uploader/demo/index.vue @@ -8,6 +8,10 @@ + + + + @@ -30,6 +34,7 @@ export default { i18n: { 'zh-CN': { + failed: '上传失败', upload: '上传文件', preview: '文件预览', maxCount: '限制上传数量', @@ -38,6 +43,7 @@ export default { invalidType: '请上传 jpg 格式图片', }, 'en-US': { + failed: 'Failed', upload: 'Upload File', preview: 'Preview File', maxCount: 'Max Count', @@ -55,9 +61,18 @@ export default { ], fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }], fileList3: [], + failedFileList: [], }; }, + created() { + this.failedFileList.push({ + url: 'https://img.yzcdn.cn/vant/leaf.jpg', + status: 'failed', + message: this.$t('failed'), + }); + }, + methods: { beforeRead(file) { if (file.type !== 'image/jpeg') { @@ -71,6 +86,11 @@ export default { afterRead(file, detail) { console.log(file, detail); }, + + afterReadFailed(item) { + item.status = 'failed'; + item.message = this.$t('failed'); + }, }, }; diff --git a/src/uploader/index.js b/src/uploader/index.js index 8d965cab3..fa4b2b631 100644 --- a/src/uploader/index.js +++ b/src/uploader/index.js @@ -123,7 +123,7 @@ export default createComponent({ Promise.all(files.map(file => readFile(file, this.resultType))).then( contents => { const fileList = files.map((file, index) => { - const result = { file }; + const result = { file, status: '' }; if (contents[index]) { result.content = contents[index]; @@ -137,7 +137,7 @@ export default createComponent({ ); } else { readFile(files, this.resultType).then(content => { - const result = { file: files }; + const result = { file: files, status: '' }; if (content) { result.content = content; @@ -263,6 +263,15 @@ export default createComponent({ ); + const Mask = item.status === 'failed' && ( +
+ + {item.message && ( +
{item.message}
+ )} +
+ ); + return (
{Preview} + {Mask} {DeleteIcon}
); diff --git a/src/uploader/index.less b/src/uploader/index.less index 677b3195f..0d3e45a5b 100644 --- a/src/uploader/index.less +++ b/src/uploader/index.less @@ -76,6 +76,32 @@ } } + &__mask { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: @white; + background-color: @uploader-mask-background-color; + border-radius: @uploader-upload-border-radius; + + &-icon { + font-size: @uploader-mask-icon-size; + } + + &-message { + margin-top: 6px; + padding: 0 @padding-base; + font-size: @uploader-mask-message-font-size; + line-height: @uploader-mask-message-line-height; + } + } + &__file { display: flex; flex-direction: column; diff --git a/src/uploader/test/__snapshots__/demo.spec.js.snap b/src/uploader/test/__snapshots__/demo.spec.js.snap index 33f4e723f..b258121cd 100644 --- a/src/uploader/test/__snapshots__/demo.spec.js.snap +++ b/src/uploader/test/__snapshots__/demo.spec.js.snap @@ -32,6 +32,25 @@ exports[`renders demo correctly 1`] = ` +
+
+
+
+
+
+
+
+
+ +
上传失败
+
+ +
+
+
+
+
+
diff --git a/src/uploader/utils.ts b/src/uploader/utils.ts index 03028ca1c..2f5eb8c22 100644 --- a/src/uploader/utils.ts +++ b/src/uploader/utils.ts @@ -41,6 +41,8 @@ export type FileListItem = { file?: File; content?: string; // dataUrl isImage?: boolean; + status?: '' | 'uploading' | 'done' | 'failed'; + message?: string; }; const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;