Browse Source

fix:updata 说明文档

lilinsen 5 years ago
parent
commit
c0473fd209
3 changed files with 124 additions and 7 deletions
  1. 41 5
      src/packages/uploader/demo.vue
  2. 76 0
      src/packages/uploader/doc.md
  3. 7 2
      src/packages/uploader/uploader.vue

+ 41 - 5
src/packages/uploader/demo.vue

@@ -4,8 +4,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-uploader
-            :beforeUpload="test"
+          <nut-uploader            
             :name="name"
             :url="url"
             :xhrState="stateNum"
@@ -116,7 +115,40 @@
         <div slot="desc"></div>
       </nut-cell>
     </div>
-
+    <p>上传图片前处理图片内容</p>
+    <nut-cell>
+        <span slot="title">
+          <nut-uploader
+          :beforeUpload="test"
+          :name="name"
+          :url="url"
+          :xhrState="stateNum"
+          :acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
+          @success="demo1Success"
+          @failure="demo1Fail"
+          @start="demo1UploadStart"
+          @showMsg="showMsg"
+        ><nut-button small>上传图片前处理图片内容</nut-button></nut-uploader>
+        </span>
+        <div slot="desc"></div>
+      </nut-cell>
+    <p>自定义增加上传图片数据</p>
+    <nut-cell>
+        <span slot="title">
+          <nut-uploader
+          :selfData="selfData"          
+          :name="name"
+          :url="url"
+          :xhrState="stateNum"
+          :acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
+          @success="demo1Success"
+          @failure="demo1Fail"
+          @start="demo1UploadStart"
+          @showMsg="showMsg"
+        ><nut-button small>自定义增加上传图片数据</nut-button></nut-uploader>
+        </span>
+        <div slot="desc"></div>
+      </nut-cell>
     <transition name="fade">
       <div class="img-outbox">
         <img class="img-box" v-if="previewImg" :src="previewImg" alt>
@@ -130,6 +162,9 @@ export default {
   components: {},
   data() {
     return {
+      selfData:{
+        test1:'自定义数据'
+      },
       url: "https://my-json-server.typicode.com/linrufeng/demo/posts",
       demo1Name: "点击选择文件",
       demo2Name: "点击选择文件",
@@ -152,9 +187,10 @@ export default {
     };
   },
   methods: {
-    test(event){     
+    test(event){   
+      console.log(event,'可以处理input选择的内容')  
       return {
-        event:'',
+        event:event,
         data:''
       }
     },

+ 76 - 0
src/packages/uploader/doc.md

@@ -140,6 +140,69 @@ export default {
 </nut-uploader>  
 <nut-progress :percentage="progressNum" :showText="false" strokeWidth="24"/>
 ```
+预览上传图片
+```html
+ <nut-uploader
+    :name="name"
+    :url="url"
+    :xhrState="stateNum"
+    :isPreview="true"
+    @success="demoSuccess"
+    @fail="demoFail"
+    @preview="preview"
+    @showMsg="showMsg1"
+  >
+    <nut-button small>上传</nut-button>
+  </nut-uploader>
+```
+```js
+preview(file) {
+  this.previewImg = file;
+},
+```
+
+上传图片前处理图片内容
+
+```html
+ <nut-uploader
+    :beforeUpload="test"
+    :name="name"
+    :url="url"
+    :xhrState="stateNum"
+    :acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
+    @success="demo1Success"
+    @failure="demo1Fail"
+    @start="demo1UploadStart"
+    @showMsg="showMsg"
+  ><nut-button small>上传图片前处理图片内容</nut-button></nut-uploader>
+```
+```js
+test($ev){   
+  console.log($ev,'可以处理input选择的内容')  
+  return {
+    event:$ev,
+    data:''
+  }
+},
+```
+
+自定义增加上传图片数据
+```html
+<nut-uploader
+    :selfData="selfData"          
+    :name="name"
+    :url="url"
+    :xhrState="stateNum"
+    :acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
+    @success="demo1Success"
+    @failure="demo1Fail"
+    @start="demo1UploadStart"
+    @showMsg="showMsg"
+  ><nut-button small>自定义增加上传图片数据</nut-button></nut-uploader>
+
+```
+
+
 
 ## Prop
 
@@ -158,6 +221,8 @@ export default {
 | limitError | 文件大小超过限制提示文案 | String | "文件大小超过限制"
 | xmlError | 浏览器不支持本组件时的提示文案 | String | "对不起,您的浏览器不支持本组件!"
 | withCredentials | 支持发送 cookie 凭证信息 | Boolean | fasle
+| beforeUpload | 上传前的函数需要返回一个对象  | Function | {event:$event} $event为点击事件必传
+| selfData | 自定义增加上传的数据 | Object | {}
 
 ## Event
 
@@ -169,3 +234,14 @@ export default {
 | success | 上传成功 | 文件、responseText
 | failure | 上传失败 | 文件、responseText
 | showMsg | 组件抛出信息的处理函数 | 组件抛出的提示信息
+
+## tips
+
+使用 beforeUpload 一定要返回一个JSON 对象且 event 为必传字段
+```js
+beforeUpload($e){
+  return {
+    event:$e
+  }
+}
+```

+ 7 - 2
src/packages/uploader/uploader.vue

@@ -177,8 +177,13 @@ export default {
         let promise =new Promise((reslove,reject)=>{
           reslove(this.beforeUpload($event))
         })
-        let resData = await promise;
-        this.uploadData(resData.event,resData.data)			
+        let resData = await promise;        
+        if(typeof resData === 'object' && typeof  resData.event === 'object'){
+          this.uploadData(resData.event,resData.data)			
+        }else{
+          console.warn('resData: 必须包含 event字段且为input $event 的事件对象')
+        }
+        
       }else{
 		    this.uploadData($event)
       }