[improvement] Uploader: support preview network image (#3899)

src/uploader/README.md

@@ -36,7 +36,9 @@ export default {
 export default {
   data() {
     return {
-      fileList: []
+      fileList: [
+        { url: 'https://img.yzcdn.cn/vant/cat.jpeg' }
+      ]
     }
   }
 };

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' }
+      ]
     }
   }
 };

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: []
     };

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(item => isImageFile(item))
-        .filter(content => isImageDataUrl(content));
+        .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) => (
         <div class={bem('preview')}>
-          <Image
+          {isImageFile(item) ? (
-            fit="cover"
+            <Image
-            src={item.content}
+              fit="cover"
-            class={bem('preview-image')}
+              src={item.content || item.url}
-            width={this.previewSize}
+              class={bem('preview-image')}
-            height={this.previewSize}
+              width={this.previewSize}
-            scopedSlots={{
+              height={this.previewSize}
-              error() {
+              onClick={() => {
-                return [
-                  <Icon class={bem('file-icon')} name="description" />,
-                  <div class={[bem('file-name'), 'van-ellipsis']}>{item.file.name}</div>
-                ];
-              }
-            }}
-            onClick={() => {
-              if (isImageDataUrl(item.content)) {
                 this.onPreviewImage(item);
-              }
+              }}
-            }}
+            />
-          />
+          ) : (
+            <div
+              class={bem('file')}
+              style={{
+                width: this.previewSizeWithUnit,
+                height: this.previewSizeWithUnit
+              }}
+            >
+              <Icon class={bem('file-icon')} name="description" />
+              <div class={[bem('file-name'), 'van-ellipsis']}>
+                {item.file ? item.file.name : item.url}
+              </div>
+            </div>
+          )}
           <Icon
             name="delete"
             class={bem('preview-delete')}
@@ -222,7 +231,7 @@ export default createComponent({
 
       let style;
       if (this.previewSize) {
-        const size = addUnit(this.previewSize);
+        const size = this.previewSizeWithUnit;
         style = {
           width: size,
           height: size

src/uploader/index.less

@@ -69,18 +69,28 @@
     }
   }
 
-  &__file-icon {
+  &__file {
-    color: @gray-darker;
+    display: flex;
-    font-size: 20px;
+    flex-direction: column;
-  }
+    align-items: center;
+    justify-content: center;
+    width: @uploader-size;
+    height: @uploader-size;
+    background-color: #f8f8f8;
 
-  &__file-name {
+    &-icon {
-    box-sizing: border-box;
+      color: @gray-darker;
-    width: 100%;
+      font-size: 20px;
-    margin-top: 5px;
+    }
-    padding: 0 5px;
+
-    color: @gray-darker;
+    &-name {
-    font-size: 12px;
+      box-sizing: border-box;
-    text-align: center;
+      width: 100%;
+      margin-top: 5px;
+      padding: 0 5px;
+      color: @gray-darker;
+      font-size: 12px;
+      text-align: center;
+    }
   }
 }

src/uploader/test/__snapshots__/demo.spec.js.snap

@@ -13,6 +13,13 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-uploader">
       <div class="van-uploader__wrapper">
+        <div class="van-uploader__preview">
+          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+                <!----></i></div>
+          </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+            <!----></i>
+        </div>
         <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
             <!----></i><input multiple="multiple" type="file" accept="*" class="van-uploader__input"></div>
       </div>

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`] = `
+<div
+  class="van-image-preview"
+>
+  <div
+    class="van-image-preview__index"
+  >
+    1/2
+  </div>
+  <div
+    class="van-swipe"
+  >
+    <div
+      class="van-swipe__track"
+      style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"
+    >
+      <div
+        class="van-swipe-item"
+        style="width: 0px; height: 100%; transform: translateX(0px);"
+      >
+        <img
+          class="van-image-preview__image"
+          src="https://img.yzcdn.cn/vant/cat.jpeg"
+          style="transition: .3s all;"
+        />
+      </div>
+      <div
+        class="van-swipe-item"
+        style="width: 0px; height: 100%; transform: translateX(0px);"
+      >
+        <img
+          class="van-image-preview__image"
+          src="data:image/test"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`delete preview image 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">
@@ -32,24 +72,6 @@ exports[`max-count prop 1`] = `
 </div>
 `;
 
-exports[`preview not image file 1`] = `
-<div class="van-uploader">
-  <div class="van-uploader__wrapper">
-    <div class="van-uploader__preview">
-      <div class="van-image van-uploader__preview-image">
-        <div class="van-image__error"><i class="van-icon van-icon-description van-uploader__file-icon" style="">
-            <!----></i>
-          <div class="van-uploader__file-name van-ellipsis">test.md</div>
-        </div>
-      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
-        <!----></i>
-    </div>
-    <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
-        <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
-  </div>
-</div>
-`;
-
 exports[`preview-size prop 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">
@@ -69,6 +91,27 @@ exports[`preview-size prop 1`] = `
 exports[`render preview image 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">
+    <div class="van-uploader__preview">
+      <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
+        <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+            <!----></i></div>
+      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+        <!----></i>
+    </div>
+    <div class="van-uploader__preview">
+      <div class="van-uploader__file"><i class="van-icon van-icon-description van-uploader__file-icon">
+          <!----></i>
+        <div class="van-uploader__file-name van-ellipsis">https://img.yzcdn.cn/vant/test.pdf</div>
+      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+        <!----></i>
+    </div>
+    <div class="van-uploader__preview">
+      <div class="van-uploader__file"><i class="van-icon van-icon-description van-uploader__file-icon">
+          <!----></i>
+        <div class="van-uploader__file-name van-ellipsis">test.pdf</div>
+      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+        <!----></i>
+    </div>
     <div class="van-uploader__preview">
       <div class="van-image van-uploader__preview-image"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
         <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">

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();
-});

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();
+});

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 {
+export type FileListItem = {
-  return dataUrl.indexOf('data:image') === 0;
+  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;
 }