diff --git a/src/uploader/README.md b/src/uploader/README.md index a878c22bf..82a81f93b 100644 --- a/src/uploader/README.md +++ b/src/uploader/README.md @@ -36,7 +36,9 @@ export default { export default { data() { return { - fileList: [] + fileList: [ + { url: 'https://img.yzcdn.cn/vant/cat.jpeg' } + ] } } }; diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index 4655c9ce7..de1cd6ad2 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -41,7 +41,9 @@ export default { export default { data() { return { - fileList: [] + fileList: [ + { url: 'https://img.yzcdn.cn/vant/cat.jpeg' } + ] } } }; diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue index 6d22ccce0..3b4bb0b7d 100644 --- a/src/uploader/demo/index.vue +++ b/src/uploader/demo/index.vue @@ -63,7 +63,7 @@ export default { data() { return { - fileList: [], + fileList: [{ url: 'https://img.yzcdn.cn/vant/cat.jpeg' }], fileList2: [], fileList3: [] }; diff --git a/src/uploader/index.js b/src/uploader/index.js index fa7b4cb58..449ad073e 100644 --- a/src/uploader/index.js +++ b/src/uploader/index.js @@ -1,5 +1,5 @@ import { createNamespace, addUnit } from '../utils'; -import { toArray, readFile, isOversize, isImageDataUrl } from './utils'; +import { toArray, readFile, isOversize, isImageFile } from './utils'; import Icon from '../icon'; import Image from '../image'; import ImagePreview from '../image-preview'; @@ -54,6 +54,10 @@ export default createComponent({ return { name: this.name }; + }, + + previewSizeWithUnit() { + return addUnit(this.previewSize); } }, @@ -145,12 +149,12 @@ export default createComponent({ onPreviewImage(item) { const imageFiles = this.fileList - .map(item => item.content) - .filter(content => isImageDataUrl(content)); + .filter(item => isImageFile(item)) + .map(item => item.content || item.url); ImagePreview({ images: imageFiles, - startPosition: imageFiles.indexOf(item.content) + startPosition: imageFiles.indexOf(item.content || item.url) }); }, @@ -161,26 +165,31 @@ export default createComponent({ return this.fileList.map((item, index) => (
- , -
{item.file.name}
- ]; - } - }} - onClick={() => { - if (isImageDataUrl(item.content)) { + {isImageFile(item) ? ( + { this.onPreviewImage(item); - } - }} - /> + }} + /> + ) : ( +
+ +
+ {item.file ? item.file.name : item.url} +
+
+ )}
+
+
+
+
+
+ +
diff --git a/src/uploader/test/__snapshots__/index.spec.js.snap b/src/uploader/test/__snapshots__/index.spec.js.snap index 705231f65..5f0e2abcc 100644 --- a/src/uploader/test/__snapshots__/index.spec.js.snap +++ b/src/uploader/test/__snapshots__/index.spec.js.snap @@ -1,5 +1,45 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`click to preview image 1`] = ` +
+
+ 1/2 +
+
+
+
+ +
+
+ +
+
+
+
+`; + exports[`delete preview image 1`] = `
@@ -32,24 +72,6 @@ exports[`max-count prop 1`] = `
`; -exports[`preview not image file 1`] = ` -
-
-
-
-
- -
test.md
-
-
- -
-
-
-
-
-`; - exports[`preview-size prop 1`] = `
@@ -69,6 +91,27 @@ exports[`preview-size prop 1`] = ` exports[`render preview image 1`] = `
+
+
+
+
+
+ +
+
+
+ +
https://img.yzcdn.cn/vant/test.pdf
+
+ +
+
+
+ +
test.pdf
+
+ +
diff --git a/src/uploader/test/index.spec.js b/src/uploader/test/index.spec.js index 316a5d16a..1ed3935db 100644 --- a/src/uploader/test/index.spec.js +++ b/src/uploader/test/index.spec.js @@ -6,7 +6,7 @@ window.File = function () { }; const mockFileDataUrl = 'data:image/test'; -const mockFile = new File([], '/Users'); +const mockFile = new File([], 'test.jpg'); const file = { target: { files: [mockFile] } }; const multiFile = { target: { files: [mockFile, mockFile] } }; @@ -164,7 +164,11 @@ it('render upload-text', () => { it('render preview image', async () => { const wrapper = mount(Uploader, { propsData: { - fileList: [] + fileList: [ + { url: 'https://img.yzcdn.cn/vant/cat.jpeg' }, + { url: 'https://img.yzcdn.cn/vant/test.pdf' }, + { file: { name: 'test.pdf' } } + ] }, listeners: { input(fileList) { @@ -262,7 +266,10 @@ it('delete preview image', async () => { it('click to preview image', async () => { const wrapper = mount(Uploader, { propsData: { - fileList: [], + fileList: [ + { url: 'https://img.yzcdn.cn/vant/cat.jpeg' }, + { url: 'https://img.yzcdn.cn/vant/test.pdf' } + ], previewSize: 30 }, listeners: { @@ -278,25 +285,6 @@ it('click to preview image', async () => { wrapper.find('.van-image').trigger('click'); const imagePreviewNode = document.querySelector('.van-image-preview'); - expect(imagePreviewNode).toBeTruthy(); + expect(imagePreviewNode).toMatchSnapshot(); imagePreviewNode.remove(); }); - -it('preview not image file', async () => { - const wrapper = mount(Uploader, { - propsData: { - fileList: [{ - content: 'data:application', - file: { - name: 'test.md' - } - }] - } - }); - - wrapper.find('img').trigger('error'); - wrapper.find('.van-image').trigger('click'); - - expect(document.querySelector('.van-image-preview')).toBeFalsy(); - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src/uploader/test/utils.spec.js b/src/uploader/test/utils.spec.js new file mode 100644 index 000000000..b38ae6a41 --- /dev/null +++ b/src/uploader/test/utils.spec.js @@ -0,0 +1,14 @@ +import { isImageFile } from '../utils'; + +test('isImageFile', () => { + expect(isImageFile({ url: 'https://a.jpg' })).toBeTruthy(); + expect(isImageFile({ url: 'https://a.jpeg' })).toBeTruthy(); + expect(isImageFile({ url: 'https://a.png' })).toBeTruthy(); + expect(isImageFile({ url: 'https://a.svg' })).toBeTruthy(); + expect(isImageFile({ url: 'https://a.gif' })).toBeTruthy(); + expect(isImageFile({ file: { type: 'image/jpg' } })).toBeTruthy(); + expect(isImageFile({ file: { type: 'application/pdf' } })).toBeFalsy(); + expect(isImageFile({ content: 'data:image/xxx' })).toBeTruthy(); + expect(isImageFile({ content: 'data:application/xxx' })).toBeFalsy(); + expect(isImageFile({})).toBeFalsy(); +}); diff --git a/src/uploader/utils.ts b/src/uploader/utils.ts index be085ebf4..e8a826dcf 100644 --- a/src/uploader/utils.ts +++ b/src/uploader/utils.ts @@ -26,6 +26,30 @@ export function isOversize(files: File | File[], maxSize: number): boolean { return toArray(files).some(file => file.size > maxSize); } -export function isImageDataUrl(dataUrl: string): boolean { - return dataUrl.indexOf('data:image') === 0; +export type FileListItem = { + url?: string; + file?: File; + content?: string; // dataUrl +}; + +const IMAGE_EXT = ['jpeg', 'jpg', 'gif', 'png', 'svg']; + +export function isImageUrl(url: string): boolean { + return IMAGE_EXT.some(ext => url.indexOf(`.${ext}`) !== -1); +} + +export function isImageFile(item: FileListItem): boolean { + if (item.file && item.file.type) { + return item.file.type.indexOf('image') === 0; + } + + if (item.url) { + return isImageUrl(item.url); + } + + if (item.content) { + return item.content.indexOf('data:image') === 0; + } + + return false; }