fix: upload thumbUrl preview not work

vueComponent · Jul 3, 2018 · 1584b38 · 1584b38
1 parent 19698a7
commit 1584b38
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 45 deletions.
diff --git a/components/upload/Upload.jsx b/components/upload/Upload.jsx
@@ -13,8 +13,6 @@ import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './u
 
 export { UploadProps }
 
-function noop () {}
-
 export default {
   name: 'AUpload',
   Dragger: Dragger,
@@ -189,9 +187,11 @@ export default {
         },
         on: {
           remove: this.handleManualRemove,
-          preview: this.$listeners.preview || noop,
         },
       }
+      if (this.$listeners.preview) {
+        uploadListProps.on.preview = this.$listeners.preview
+      }
       return (
         <UploadList
           {...uploadListProps}

diff --git a/components/upload/UploadList.jsx b/components/upload/UploadList.jsx
@@ -61,6 +61,10 @@ export default {
       this.$emit('remove', file)
     },
     handlePreview (file, e) {
+      const { preview } = this.$listeners
+      if(!preview) {
+        return
+      }
       e.preventDefault()
       return this.$emit('preview', file)
     },

diff --git a/components/upload/__tests__/__snapshots__/demo.test.js.snap b/components/upload/__tests__/__snapshots__/demo.test.js.snap
@@ -57,31 +57,18 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
 `;
 
 exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
-<div><span><div class="ant-upload-list ant-upload-list-picture-card"><div class="ant-upload-list-item ant-upload-list-item-done"><div class="ant-upload-list-item-info"><span><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="xxx.png"></a><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="xxx.png" class="ant-upload-list-item-name">xxx.png</a></span></div>
-<span
-  class="ant-upload-list-item-actions">
-  <a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="Preview file">
-    <i class="anticon anticon-eye-o"></i>
-  </a>
-  <i title="Remove file" class="anticon anticon-delete"></i>
-  </span>
+<div><span><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><div class="ant-upload-list ant-upload-list-picture"><div class="ant-upload-list-item ant-upload-list-item-done"><div class="ant-upload-list-item-info"><span><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="xxx.png"></a><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="xxx.png" class="ant-upload-list-item-name">xxx.png</a></span></div>
+<i
+  class="anticon anticon-cross"></i>
   <!---->
   </div>
   <div class="ant-upload-list-item ant-upload-list-item-done">
     <div class="ant-upload-list-item-info"><span><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="yyy.png"></a><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="yyy.png" class="ant-upload-list-item-name">yyy.png</a></span></div>
-    <span
-      class="ant-upload-list-item-actions">
-      <a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="Preview file">
-        <i class="anticon anticon-eye-o"></i>
-      </a>
-      <i title="Remove file" class="anticon anticon-delete"></i>
-      </span>
+    <i
+      class="anticon anticon-cross"></i>
       <!---->
   </div>
   </div>
-  <div class="ant-upload ant-upload-select ant-upload-select-picture-card">
-    <!---->
-  </div>
   </span>
   <br>
   <br> <span class="upload-list-inline"><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><div class="ant-upload-list ant-upload-list-picture"><div class="ant-upload-list-item ant-upload-list-item-done"><div class="ant-upload-list-item-info"><span><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="xxx.png"></a><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="xxx.png" class="ant-upload-list-item-name">xxx.png</a></span></div>

diff --git a/components/upload/demo/avatar.md b/components/upload/demo/avatar.md
@@ -29,10 +29,10 @@ The return value of function `beforeUpload` can be a Promise to check asynchrono
   </a-upload>
 </template>
 <script>
-function getBase64(img, callback) {
-  const reader = new FileReader();
-  reader.addEventListener('load', () => callback(reader.result));
-  reader.readAsDataURL(img);
+function getBase64 (img, callback) {
+  const reader = new FileReader()
+  reader.addEventListener('load', () => callback(reader.result))
+  reader.readAsDataURL(img)
 }
 export default {
   data () {
@@ -42,38 +42,47 @@ export default {
     }
   },
   methods: {
-    handleChange(info) {
+    handleChange (info) {
       if (info.file.status === 'uploading') {
         this.loading = true
-        return;
+        return
       }
       if (info.file.status === 'done') {
         // Get this url from response in real world.
         getBase64(info.file.originFileObj, (imageUrl) => {
           this.imageUrl = imageUrl
           this.loading = false
-        });
+        })
       }
     },
-    beforeUpload(file) {
-      const isJPG = file.type === 'image/jpeg';
+    beforeUpload (file) {
+      const isJPG = file.type === 'image/jpeg'
       if (!isJPG) {
-        this.$message.error('You can only upload JPG file!');
+        this.$message.error('You can only upload JPG file!')
       }
-      const isLt2M = file.size / 1024 / 1024 < 2;
+      const isLt2M = file.size / 1024 / 1024 < 2
       if (!isLt2M) {
-        this.$message.error('Image must smaller than 2MB!');
+        this.$message.error('Image must smaller than 2MB!')
       }
-      return isJPG && isLt2M;
+      return isJPG && isLt2M
     },
   },
 }
 </script>
-<style scoped>
+<style>
   .avatar-uploader > .ant-upload {
     width: 128px;
     height: 128px;
   }
+  .ant-upload-select-picture-card i {
+    font-size: 32px;
+    color: #999;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    color: #666;
+  }
 </style>
 ```
 

diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md
@@ -24,7 +24,7 @@ After users upload picture, the thumbnail will be shown in list. The upload butt
       </div>
     </a-upload>
     <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
-      <img alt="example" style="width: '100%'" :src="previewImage" />
+      <img alt="example" style="width: 100%" :src="previewImage" />
     </a-modal>
   </div>
 </template>
@@ -43,20 +43,20 @@ export default {
     }
   },
   methods: {
-    handleCancel() {
+    handleCancel () {
       this.previewVisible = false
     },
-    handlePreview(file) {
+    handlePreview (file) {
       this.previewImage = file.url || file.thumbUrl
       this.previewVisible = true
     },
-    handleChange({ fileList }) {
+    handleChange ({ fileList }) {
       this.fileList = fileList
     },
   },
 }
 </script>
-<style scoped>
+<style>
   /* you can make up upload button and sample style by using stylesheets */
   .ant-upload-select-picture-card i {
     font-size: 32px;

diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md
@@ -13,7 +13,7 @@ If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not suppor
   <div>
     <a-upload
       action="//jsonplaceholder.typicode.com/posts/"
-      listType="picture-card"
+      listType="picture"
       :defaultFileList="fileList"
     >
       <a-button>
@@ -57,15 +57,15 @@ export default {
 </script>
 <style scoped>
   /* tile uploaded pictures */
-  .upload-list-inline .ant-upload-list-item {
+  .upload-list-inline >>> .ant-upload-list-item {
     float: left;
     width: 200px;
     margin-right: 8px;
   }
-  .upload-list-inline .ant-upload-animate-enter {
+  .upload-list-inline >>> .ant-upload-animate-enter {
     animation-name: uploadAnimateInlineIn;
   }
-  .upload-list-inline .ant-upload-animate-leave {
+  .upload-list-inline >>> .ant-upload-animate-leave {
     animation-name: uploadAnimateInlineOut;
   }
 </style>

diff --git a/components/upload/interface.jsx b/components/upload/interface.jsx
@@ -30,7 +30,7 @@ export const UploadFileStatus = PropsTypes.oneOf(['error', 'success', 'done', 'u
 function UploadFile ({ uid, name }) {
   if (!uid && uid !== 0) return false
   if (!['string', 'number'].includes(typeof uid)) return false
-  if (!name && typeof name !== 'string') return false
+  if (name === '' || typeof name !== 'string') return false
   return true
 }