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

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