docs: update upload demo #753

vueComponent · May 25, 2019 · 1790dab · 1790dab
1 parent a5bb191
commit 1790dab
Show file tree

Hide file tree

Showing 16 changed files with 92 additions and 82 deletions.
diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.js
@@ -97,7 +97,7 @@ describe('Upload List', () => {
   it('should be uploading when upload a file', done => {
     const props = {
       propsData: {
-        action: 'http://jsonplaceholder.typicode.com/posts/',
+        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
         customRequest: successRequest,
       },
       listeners: {
@@ -133,7 +133,7 @@ describe('Upload List', () => {
   it('handle error', done => {
     const props = {
       propsData: {
-        action: 'http://jsonplaceholder.typicode.com/posts/',
+        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
         customRequest: errorRequest,
       },
       listeners: {
@@ -166,7 +166,7 @@ describe('Upload List', () => {
     const handleChange = jest.fn();
     const props = {
       propsData: {
-        action: 'http://jsonplaceholder.typicode.com/posts/',
+        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
         listType: 'picture',
         defaultFileList: fileList,
         beforeUpload: () => false,

diff --git a/components/upload/demo/avatar.md b/components/upload/demo/avatar.md
@@ -17,7 +17,7 @@ The return value of function `beforeUpload` can be a Promise to check asynchrono
     listType="picture-card"
     class="avatar-uploader"
     :showUploadList="false"
-    action="//jsonplaceholder.typicode.com/posts/"
+    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
     :beforeUpload="beforeUpload"
     @change="handleChange"
   >

diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md
@@ -10,7 +10,7 @@ Classic mode. File selection dialog pops up when upload button is clicked.
 
 ```html
 <template>
-  <a-upload name="file" :multiple="true" action="//jsonplaceholder.typicode.com/posts/" :headers="headers" @change="handleChange">
+  <a-upload name="file" :multiple="true" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :headers="headers" @change="handleChange">
     <a-button>
       <a-icon type="upload" /> Click to Upload
     </a-button>

diff --git a/components/upload/demo/defaultFileList.md b/components/upload/demo/defaultFileList.md
@@ -10,7 +10,7 @@ Use `defaultFileList` for uploaded files when page init.
 
 ```html
 <template>
-  <a-upload action="//jsonplaceholder.typicode.com/posts/" :defaultFileList="defaultFileList">
+  <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :defaultFileList="defaultFileList">
     <a-button>
       <a-icon type="upload" /> Upload
     </a-button>

diff --git a/components/upload/demo/directory.md b/components/upload/demo/directory.md
@@ -10,7 +10,7 @@ You can select and upload a whole directory.
 
 ```html
 <template>
-  <a-upload action="//jsonplaceholder.typicode.com/posts/" directory>
+  <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
     <a-button>
       <a-icon type="upload" /> Upload Directory
     </a-button>

diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md
@@ -11,7 +11,7 @@ Classic mode. File selection dialog pops up when upload button is clicked.
 
 ```html
 <template>
-  <a-upload-dragger name="file" :multiple="true" action="//jsonplaceholder.typicode.com/posts/" @change="handleChange">
+  <a-upload-dragger name="file" :multiple="true" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="handleChange">
     <p class="ant-upload-drag-icon">
       <a-icon type="inbox" />
     </p>

diff --git a/components/upload/demo/fileList.md b/components/upload/demo/fileList.md
@@ -16,7 +16,7 @@ You can gain full control over filelist by configuring `fileList`. You can accom
 
 ```html
 <template>
-  <a-upload action="//jsonplaceholder.typicode.com/posts/" :multiple="true" :fileList="fileList" @change="handleChange">
+  <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :multiple="true" :fileList="fileList" @change="handleChange">
     <a-button>
       <a-icon type="upload" /> Upload
     </a-button>
@@ -36,7 +36,7 @@ export default {
   },
   methods: {
     handleChange(info) {
-      let fileList = info.fileList;
+      let fileList = [...info.fileList];
 
       // 1. Limit the number of uploaded files
       //    Only to show two recent uploaded files, and old ones will be replaced by the new
@@ -51,14 +51,6 @@ export default {
         return file;
       });
 
-      // 3. filter successfully uploaded files according to response from server
-      fileList = fileList.filter((file) => {
-        if (file.response) {
-          return file.response.status === 'success';
-        }
-        return false;
-      });
-
       this.fileList = fileList
     },
   },

diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md
@@ -12,7 +12,7 @@ After users upload picture, the thumbnail will be shown in list. The upload butt
 <template>
   <div class="clearfix">
     <a-upload
-      action="//jsonplaceholder.typicode.com/posts/"
+      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
       listType="picture-card"
       :fileList="fileList"
       @preview="handlePreview"

diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md
@@ -12,7 +12,7 @@ If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not suppor
 <template>
   <div>
     <a-upload
-      action="//jsonplaceholder.typicode.com/posts/"
+      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
       listType="picture"
       :defaultFileList="fileList"
     >
@@ -23,7 +23,7 @@ If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not suppor
     <br />
     <br />
     <a-upload
-      action="//jsonplaceholder.typicode.com/posts/"
+      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
       listType="picture"
       :defaultFileList="fileList"
       class="upload-list-inline"

diff --git a/components/upload/demo/upload-manually.md b/components/upload/demo/upload-manually.md
@@ -61,7 +61,7 @@ export default {
 
       // You can use any AJAX library you like
       reqwest({
-        url: '//jsonplaceholder.typicode.com/posts/',
+        url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
         method: 'post',
         processData: false,
         data: formData,

diff --git a/components/vc-upload/demo/asyncAction.jsx b/components/vc-upload/demo/asyncAction.jsx
@@ -7,7 +7,7 @@ export default {
         action: () => {
           return new Promise(resolve => {
             setTimeout(() => {
-              resolve('//jsonplaceholder.typicode.com/posts/');
+              resolve('https://www.mocky.io/v2/5cc8019d300000980a055e76');
             }, 2000);
           });
         },
@@ -23,7 +23,9 @@ export default {
           console.log('error', err);
         },
       },
-      style: { margin: '100px' },
+      style: {
+        margin: '100px',
+      },
     };
     return (
       <Upload {...uploaderProps}>

diff --git a/components/vc-upload/demo/beforeUpload.jsx b/components/vc-upload/demo/beforeUpload.jsx
@@ -4,7 +4,7 @@ export default {
   render() {
     const uploaderProps = {
       props: {
-        action: '//jsonplaceholder.typicode.com/posts/',
+        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
         multiple: true,
         beforeUpload(file, fileList) {
           console.log(file, fileList);
@@ -30,11 +30,9 @@ export default {
       },
     };
     return (
-      <div
-        style={{
-          margin: '100px',
-        }}
-      >
+      <div style={{
+        margin: '100px',
+      }}>
         <div>
           <Upload {...uploaderProps}>
             <a>开始上传</a>

diff --git a/components/vc-upload/demo/customRequest.js b/components/vc-upload/demo/customRequest.js
@@ -5,9 +5,12 @@ export default {
   render() {
     const uploaderProps = {
       props: {
-        action: '//jsonplaceholder.typicode.com/posts/',
+        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
         multiple: false,
-        data: { a: 1, b: 2 },
+        data: {
+          a: 1,
+          b: 2,
+        },
         headers: {
           Authorization: '$prefix $token',
         },
@@ -25,24 +28,25 @@ export default {
           // EXAMPLE: post form-data with 'axios'
           const formData = new FormData();
           if (data) {
-            Object.keys(data).map(key => {
-              formData.append(key, data[key]);
-            });
+            Object
+              .keys(data)
+              .map(key => {
+                formData.append(key, data[key]);
+              });
           }
           formData.append(filename, file);
 
-          axios
-            .post(action, formData, {
-              withCredentials,
-              headers,
-              onUploadProgress: ({ total, loaded }) => {
-                onProgress({ percent: Math.round((loaded / total) * 100).toFixed(2) }, file);
-              },
-            })
-            .then(({ data: response }) => {
-              onSuccess(response, file);
-            })
-            .catch(onError);
+          axios.post(action, formData, {
+            withCredentials,
+            headers,
+            onUploadProgress: ({total, loaded}) => {
+              onProgress({
+                percent: Math.round((loaded / total) * 100).toFixed(2),
+              }, file);
+            },
+          }).then(({data: response}) => {
+            onSuccess(response, file);
+          }).catch(onError);
 
           return {
             abort() {
@@ -61,17 +65,17 @@ export default {
         error(err) {
           console.log('error', err);
         },
-        progress({ percent }, file) {
+        progress({
+          percent,
+        }, file) {
           console.log('progress', `${percent}%`, file.name);
         },
       },
     };
     return (
-      <div
-        style={{
-          margin: '100px',
-        }}
-      >
+      <div style={{
+        margin: '100px',
+      }}>
         <div>
           <Upload {...uploaderProps}>
             <a>开始上传</a>

diff --git a/components/vc-upload/demo/directoryUpload.js b/components/vc-upload/demo/directoryUpload.js
@@ -4,8 +4,11 @@ export default {
   render() {
     const uploaderProps = {
       props: {
-        action: '//jsonplaceholder.typicode.com/posts/',
-        data: { a: 1, b: 2 },
+        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+        data: {
+          a: 1,
+          b: 2,
+        },
         headers: {
           Authorization: 'xxxxxxx',
         },
@@ -28,7 +31,9 @@ export default {
           console.log('error', err);
         },
       },
-      style: { margin: '100px' },
+      style: {
+        margin: '100px',
+      },
     };
     return (
       <Upload {...uploaderProps}>

diff --git a/components/vc-upload/demo/drag.jsx b/components/vc-upload/demo/drag.jsx
@@ -4,7 +4,7 @@ export default {
   render() {
     const uploaderProps = {
       props: {
-        action: '//jsonplaceholder.typicode.com/posts/',
+        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
         type: 'drag',
         accept: '.png',
         beforeUpload(file) {
@@ -29,8 +29,13 @@ export default {
           alert('click');
         },
       },
-      style: { display: 'inline-block', width: '200px', height: '200px', background: '#eee' },
+      style: {
+        display: 'inline-block',
+        width: '200px',
+        height: '200px',
+        background: '#eee',
+      },
     };
-    return <Upload {...uploaderProps} />;
+    return <Upload {...uploaderProps}/>;
   },
 };
diff --git a/components/vc-upload/demo/simple.jsx b/components/vc-upload/demo/simple.jsx
@@ -2,11 +2,9 @@ import Upload from '../index';
 
 export default {
   data() {
-    return {
-      destroyed: false,
-    };
+    return {destroyed: false};
   },
-  methods: {
+  methods : {
     destroy() {
       this.destroyed = true;
     },
@@ -16,8 +14,11 @@ export default {
       return null;
     }
     const propsObj = {
-      action: '//jsonplaceholder.typicode.com/posts/',
-      data: { a: 1, b: 2 },
+      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+      data: {
+        a: 1,
+        b: 2,
+      },
       headers: {
         Authorization: 'xxxxxxx',
       },
@@ -63,14 +64,15 @@ export default {
            opacity:0.5;
         `;
     return (
-      <div
-        style={{
-          margin: '100px',
-        }}
-      >
+      <div style={{
+        margin: '100px',
+      }}>
         <h2>固定位置</h2>
 
-        <style>{style}</style>
+        <style>
+          {
+            style
+          }</style>
 
         <div>
           <Upload {...uploaderProps}>
@@ -82,17 +84,19 @@ export default {
 
         <div
           style={{
-            height: '200px',
-            overflow: 'auto',
-            border: '1px solid red',
-          }}
-        >
-          <div
-            style={{
-              height: '500px',
-            }}
-          >
-            <Upload {...uploaderProps1} component="div" style={{ display: 'inline-block' }}>
+          height: '200px',
+          overflow: 'auto',
+          border: '1px solid red',
+        }}>
+          <div style={{
+            height: '500px',
+          }}>
+            <Upload
+              {...uploaderProps1}
+              component="div"
+              style={{
+              display: 'inline-block',
+            }}>
               <a>开始上传2</a>
             </Upload>
           </div>