upd : Uploader 增加自定义headers添加

src/packages/uploader/demo.vue

@@ -48,6 +48,7 @@
             :name="name"
             :url="url"
             :xhrState="stateNum"
+            :headers="headers"
             @success="demoSuccess"
             @fail="demoFail"
             @progress="progress"
@@ -72,6 +73,28 @@
       </nut-cell>
     </div>
 
+    <p>自定义headers&formData</p>
+    <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-uploader
+            :name="name"
+            :url="url"
+            :xhrState="stateNum"
+            :headers="headers"
+            :attach="formData"
+            @success="demoSuccess"
+            @fail="demoFail"
+            @preview="preview"
+            @showMsg="showMsg1"
+          >
+            <nut-button small>上传</nut-button>
+          </nut-uploader>
+        </span>
+        <div slot="desc"></div>
+      </nut-cell>
+    </div>
+
     <p>预览上传图片</p>
     <div>
       <nut-cell>
@@ -112,6 +135,13 @@ export default {
       name: "test1",
       stateNum: 201,
       block: "block",
+      headers:{
+        token:'test'
+      },
+      formData:{
+        f1:'test',
+        f2:'test1'
+      },
       progressNum: 0,
       previewImg: null,
       previewImg2: null,

src/packages/uploader/doc.md

@@ -100,6 +100,35 @@ export default {
 </nut-uploader>   
 ```
 
+自定义 headers & formData 使用
+```html
+<nut-uploader
+  :name="name"
+  :url="url"
+  :headers="headers"
+  :attach="formData"
+  >
+  <nut-button small>上传</nut-button>
+</nut-uploader>   
+```
+```javascript
+export default { 
+  data() {
+    return {
+      url:'https://my-json-server.typicode.com/linrufeng/demo/posts', 
+      name:'testname',
+      headers:{
+        token:'test'
+      },
+      formData:{
+        f1:'test',
+        f2:'test1'
+      },
+    };
+  },
+}
+```
+
 与进度条组件 **Progress** 结合使用
 
 ```html
@@ -122,7 +151,8 @@ export default {
 | clearInput | 是否需要清空input内容，设为true支持重复选择上传同一个文件 | Boolean | false
 | maxSize | 可以设定最大上传文件的大小（字节） | Number | 5242880
 | acceptType | 可以上传文件的类型 | Array | ['image/jpeg', 'image/png', 'image/gif', 'image/bmp']
-| attach | 附加上传的信息 | Object | {}
+| attach | 附加上传的信息formData | Object | {}
+| headers | 自定义headers | Object | {}
 | xhrState | 接口响应的成功状态（status）值 | Number | 200
 | typeError | 文件类型错误提示文案 | String | "不支持上传该类型文件"
 | limitError | 文件大小超过限制提示文案 | String | "文件大小超过限制"

src/packages/uploader/uploader.vue

@@ -43,6 +43,12 @@ export default {
         return {};
       }
     },
+    headers:{
+      type: Object,
+      default() {
+        return {};
+      }
+    },
     changeEvtCallback: {
       type: Function
     },
@@ -77,6 +83,7 @@ export default {
         $el: {},
         url: this.url, //图片上传地址
         formData: null,
+        headers: {}, //自定义headers
         isPreview: this.isPreview, //是否开启本地预览
         previewData: null,
         maxSize: this.maxSize, //允许上传的文件最大字节
@@ -139,6 +146,7 @@ export default {
         formData.append(key, this.attach[key]);
       }
       opt.formData = formData;
+      opt.headers = this.headers || {};
       opt.showMsgFn = msg => {
         this.$emit("showMsg", msg);
       };

src/utils/uploader.js

@@ -4,6 +4,7 @@ class IdaUploader {
        this.options = {
            url: '',
            formData: null,
+           headers: {}, //自定义headers
            isPreview: true, //是否开启本地预览
            previewData: null,
            maxSize: 0, //允许上传的文件最大字节,0为不限制
@@ -75,7 +76,9 @@ class IdaUploader {
    uploader () {
        const xhr = new XMLHttpRequest();
        let options = this.options;
-       let formData = options.formData;       
+       let formData = options.formData;      
+       
+       
        if (xhr.upload) {    
            xhr.upload.addEventListener('progress', (e) => {
                this.triggerFunc.call(options, options.onProgress)(formData, e.loaded, e.total);
@@ -91,6 +94,10 @@ class IdaUploader {
            };
            xhr.withCredentials = true;
            xhr.open('POST', options.url, true);
+           // headers
+           for (let key in options.headers) {
+                xhr.setRequestHeader(key, options.headers[key])
+           }
            this.triggerFunc.call(options, options.onStart)();          
            xhr.send(formData);
            if(options.clearInput){