fix: uploader 更新预览

src/packages/uploader/uploader.vue

@@ -1,192 +1,196 @@
 <template>
-  <div class="nut-uploader">
-    <slot></slot>
-    <input type="file" :name="name" @change="upload($event)" class="uploader" :multiple="multiple" />
-  </div>
+    <div class="nut-uploader">
+        <slot></slot>
+        <input
+            type="file"
+            :name="name"
+            @change="upload($event)"
+            class="uploader"
+            :multiple="multiple"
+			:disabled="disabled"
+			:accept="acceptType"
+        />
+    </div>
 </template>
 <script>
-import Uploader from '../../utils/uploader.js';
-import locale from '../../mixins/locale';
+import Uploader from "../../utils/uploader.js";
+import locale from "../../mixins/locale";
 export default {
-  name: 'nut-uploader',
-  mixins: [locale],
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    url: {
-      type: String,
-      default: ''
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    isPreview: {
-      type: Boolean,
-      default: false
-    },
-    maxSize: {
-      type: Number,
-      default: 5242880
-    },
-    acceptType: {
-      type: Array,
-      default() {
-        return ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'];
-      }
-    },
-    selfData: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    attach: {
-      type: Object,
-      default() {
-        return {};
-      }
+    name: "nut-uploader",
+    mixins: [locale],
+    props: {
+        name: {
+            type: String,
+            default: "file"
+        },
+        url: {
+            type: String,
+            default: ""
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+		},
+		disabled: {
+			type: Boolean,
+            default: false
+		},
+        isPreview: {
+            type: Boolean,
+            default: false
+        },
+        maxSize: {
+            type: Number,
+            default: 5242880
+        },
+        acceptType: {
+            type: Array,
+            default() {
+                return ["image/jpeg", "image/png", "image/gif", "image/bmp"];
+            }
+        },
+        selfData: {
+            type: Object,
+            default() {
+                return {};
+            }
+        },
+        attach: {
+            type: Object,
+            default() {
+                return {};
+            }
+        },
+        headers: {
+            type: Object,
+            default() {
+                return {};
+            }
+        },
+        beforeUpload: {
+            type: Function
+        },
+        xhrState: {
+            type: Number,
+            default: 200
+        },
+        clearInput: {
+            type: Boolean,
+            default: true
+        },
+        xmlError: {
+            type: String,
+            default: ""
+        },
+        typeError: {
+            type: String,
+            default: "不支持上传该类型文件"
+        },
+        limitError: {
+            type: String,
+            default: "对不起，您的浏览器不支持本组件"
+        },
+        withCredentials: {
+            type: Boolean,
+            default: false
+        }
     },
-    headers: {
-      type: Object,
-      default() {
+    data() {
         return {};
-      }
-    },
-    changeEvtCallback: {
-      type: Function
-    },
-    beforeUpload: {
-      type: Function
     },
-    xhrState: {
-      type: Number,
-      default: 200
-    },
-    clearInput: {
-      type: Boolean,
-      default: false
-    },
-    xmlError: {
-      type: String,
-      default: ''
-    },
-    typeError: {
-      type: String,
-      default: ''
-    },
-    limitError: {
-      type: String,
-      default: ''
-    },
-    withCredentials: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    createUploaderOpts() {
-      const _this = this;
-      return {
-        $el: {},
-        url: this.url, //图片上传地址
-        formData: null,
-        headers: {}, //自定义headers
-        isPreview: this.isPreview, //是否开启本地预览
-        previewData: null,
-        maxSize: this.maxSize, //允许上传的文件最大字节
-        acceptType: this.acceptType, //允许上传的文件类型
-        xhrState: this.xhrState,
-        clearInput: this.clearInput,
-        withCredentials: this.withCredentials, //支持发送 cookie 凭证信息
-        xmlError: this.xmlError || this.nutTranslate('lang.uploader.xmlError'),
-        typeError: this.typeError || this.nutTranslate('lang.uploader.typeError'),
-        limitError: this.limitError || this.nutTranslate('lang.uploader.limitError'),
-        onStart() {
-          _this.$emit('start');
-        },
-        onProgress(file, loaded, total) {
-          _this.$emit('progress', file, loaded, total);
-        },
-        onPreview(previewFile) {
-          _this.$emit('preview', previewFile);
-        },
-        onSuccess(file, responseTxt) {
-          _this.$emit('success', file, responseTxt);
-        },
-        onFailure(file, responseTxt) {
-          _this.$emit('failure', file, responseTxt);
-        }
-      };
-    },
-    uploadData($event, selfData = {}) {
-      const tar = $event.target;
-      if (!this.url) {
-        this.$emit('showMsg', '请先配置上传url');
-        this.$emit('afterChange', tar, $event);
-        return;
-      }
-      const formData = new FormData();
-      for (let key of Object.keys(this.attach)) {
-        formData.append(key, this.attach[key]);
-      }
-      let finialyOutData = Object.assign(this.selfData, selfData);
-      if (finialyOutData) {
-        for (let key in finialyOutData) {
-          formData.append(key, finialyOutData[key]);
-        }
-      }
-      const opt = this.createUploaderOpts();
-      opt.$el = tar;
-      if (this.isPreview) {
-        opt.previewData = tar.files[0];
-      }
-      if (this.multiple) {
-        for (let i = 0; i < tar.files.length; i++) {
-          if (tar.files[i]) {
-            if (this.acceptType.indexOf(tar.files[i].type) == -1) {
-              this.$emit('showMsg', opt.typeError);
-              return;
+    methods: {
+        createUploaderOpts() {
+            const _this = this;
+            return {
+                $el: {},
+                url: this.url, //图片上传地址
+                formData: null,
+                headers: {}, //自定义headers
+                isPreview: this.isPreview, //是否开启本地预览
+                previewData: null,
+                maxSize: this.maxSize, //允许上传的文件最大字节
+                acceptType: this.acceptType, //允许上传的文件类型
+                xhrState: this.xhrState,
+                clearInput: this.clearInput,
+                withCredentials: this.withCredentials, //支持发送 cookie 凭证信息
+                xmlError:
+                    this.xmlError ||
+                    this.nutTranslate("lang.uploader.xmlError"),
+                typeError:
+                    this.typeError ||
+                    this.nutTranslate("lang.uploader.typeError"),
+                limitError:
+                    this.limitError ||
+                    this.nutTranslate("lang.uploader.limitError"),
+                onStart() {
+                    _this.$emit("start");
+                },
+                onProgress(file, loaded, total) {
+                    _this.$emit("progress", file, loaded, total);
+                },
+                onPreview(previewFile) {				
+                    _this.$emit("preview", previewFile);
+                },
+                onSuccess(file, responseTxt) {
+                    _this.$emit("success", file, responseTxt);
+                },
+                onFailure(file, responseTxt) {
+                    _this.$emit("failure", file, responseTxt);
+                }
+            };
+        },
+        uploadData($event, selfData = {}) {
+            const tar = $event.target;
+            if (!this.url) {
+                this.$emit("showMsg", "请先配置上传url");
+                this.$emit("afterChange", tar, $event);
+                return;
+            }
+            const formData = new FormData();
+            const opt = this.createUploaderOpts();
+            opt.$el = tar;
+            if (this.isPreview) {				
+                opt.previewData = tar.files;
+			}
+			let len = this.multiple ? tar.files.length : 1;     
+            formData.append(tar.name, tar.files[0]);
+            for (const key of Object.keys(this.attach)) {
+                formData.append(key, this.attach[key]);
+            }
+            const finialyOutData = Object.assign(this.selfData, selfData);
+            if (finialyOutData) {
+                for (const key in finialyOutData) {
+                    formData.append(key, finialyOutData[key]);
+                }
+            }
+            opt.formData = formData;
+            opt.headers = this.headers || {};
+            opt.showMsgFn = (msg) => {
+                this.$emit("showMsg", msg);
+            };
+            new Uploader(opt);
+            this.$emit("afterChange", tar, $event);
+        },
+        async upload($event) {
+            if (typeof this.beforeUpload === "function") {
+                const promise = new Promise((reslove, reject) => {
+                    reslove(this.beforeUpload($event));
+                });
+                const 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);
             }
-          }
-        }
-      } else {
-        if (tar.files[0]) {
-          if (this.acceptType.indexOf(tar.files[0].type) == -1) {
-            this.$emit('showMsg', opt.typeError);
-            return;
-          }
-        }
-      }
-      formData.append(tar.name, tar.files[0]);
-      opt.formData = formData;
-      opt.headers = this.headers || {};
-      opt.showMsgFn = msg => {
-        this.$emit('showMsg', msg);
-      };
-      new Uploader(opt);
-      this.$emit('afterChange', tar, $event);
-    },
-    async upload($event) {
-      if (typeof this.beforeUpload === 'function') {
-        let promise = new Promise((reslove, reject) => {
-          reslove(this.beforeUpload($event));
-        });
-        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);
-      }
     }
-  }
 };
 </script>

src/utils/uploader.js

@@ -1,114 +1,128 @@
-class IdaUploader {
-  constructor(settings) {
-    this.options = {
-      url: '',
-      formData: null,
-      headers: {}, //自定义headers
-      withCredentials: false, //支持发送 cookie 凭证信息
-      isPreview: true, //是否开启本地预览
-      previewData: null,
-      maxSize: 0, //允许上传的文件最大字节,0为不限制
-      acceptType: [], //允许上传的文件类型,如'image/jpeg'
-      showMsgFn: null,
-      onStart: null,
-      onProgress: null,
-      onPreview: null,
-      onSuccess: null,
-      onFailure: null,
-      xhrStatus: 200, //默认上传成功是200
-      readyState: 4,
-      xmlError: null,
-      typeError: null,
-      limitError: null
-    };
-    Object.assign(this.options, settings);
-    this[this.options.isPreview ? 'preview' : 'uploader']();
-  }
-  triggerFunc(func) {
-    if (typeof func === 'function') {
-      return func.bind(this);
-    } else {
-      console.warn(func + 'is not a function!');
-      return function() {};
-    }
-  }
-  showMsg(msg) {
-    if (typeof this.options.showMsgFn == 'function') {
-      this.options.showMsgFn(msg);
-    } else {
-      console.log(msg);
-    }
-  }
-  check(file) {
-    if (Array.isArray(file)) {
-      for (let key in file) {
-        if (this.options.maxSize && file[key].size > this.options.maxSize) {
-          this.showMsg(this.options.limitError);
-          return false;
-        }
-        if (this.options.acceptType.length && this.options.acceptType.indexOf(file[key].type) === -1) {
-          this.showMsg(this.options.typeError);
-          return false;
-        }
-      }
-    } else {
-      if (this.options.maxSize && file.size > this.options.maxSize) {
-        this.showMsg(this.options.limitError);
-        return false;
-      }
-      if (this.options.acceptType.length && this.options.acceptType.indexOf(file.type) === -1) {
-        this.showMsg(this.options.typeError);
-        return false;
-      }
-    }
-    return true;
-  }
-  preview() {
-    const file = this.options.previewData;
-    if (!this.check(file)) return;
-    const reader = new FileReader();
-    reader.onload = e => {
-      this.uploader();
-      this.triggerFunc.call(this.options, this.options.onPreview)(e.target.result);
-    };
-    reader.readAsDataURL(file);
-  }
-  uploader() {
-    const xhr = new XMLHttpRequest();
-    let options = this.options;
-    let formData = options.formData;
 
-    if (xhr.upload) {
-      xhr.upload.addEventListener(
-        'progress',
-        e => {
-          this.triggerFunc.call(options, options.onProgress)(formData, e.loaded, e.total);
-        },
-        false
-      );
-      xhr.onreadystatechange = e => {
-        if (xhr.readyState === 4) {
-          if (xhr.status === options.xhrState) {
-            this.triggerFunc.call(options, options.onSuccess)(formData, xhr.responseText);
-          } else {
-            this.triggerFunc.call(options, options.onFailure)(formData, xhr.responseText);
-          }
+class IdaUploader {
+   constructor (settings) {
+       this.options = {
+           url: '',
+           formData: null,
+           headers: {}, //自定义headers
+           withCredentials:false,//支持发送 cookie 凭证信息
+           isPreview: true, //是否开启本地预览
+           previewData: null,
+           maxSize: 0, //允许上传的文件最大字节,0为不限制
+           acceptType: [], //允许上传的文件类型,如'image/jpeg'
+           showMsgFn: null,
+           onStart: null,
+           onProgress: null,
+           onPreview: null,
+           onSuccess: null,
+           onFailure: null,
+           xhrStatus:200, //默认上传成功是200
+           readyState:4,
+           xmlError:null, 
+           typeError:null, 
+           limitError:null 
+       };
+       Object.assign(this.options, settings);
+       this[this.options.isPreview ? 'preview' : 'uploader']()
+   }
+   triggerFunc(func) {
+        if (typeof(func)==='function') {
+            return func.bind(this);
+        } else {
+            console.warn(func + 'is not a function!');
+            return function() {};
         }
-      };
-      xhr.withCredentials = options.withCredentials;
-      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) {
-        options.$el.value = '';
-      }
-    } else {
-      this.showMsg(this.xmlError);
     }
-  }
+   showMsg (msg) {       
+       if (typeof(this.options.showMsgFn)=='function') {
+           this.options.showMsgFn(msg);
+       } else {
+           console.log(msg);
+       }
+   }
+   check (file) {
+       if(Array.isArray(file)){           
+           for(let key in file){
+                if (this.options.maxSize && (file[key].size > this.options.maxSize)) {
+                    this.showMsg(this.options.limitError);
+                    return false;
+                }
+                if (this.options.acceptType.length && this.options.acceptType.indexOf(file[key].type) === -1) {           
+                    this.showMsg(this.options.typeError);
+                    return false;
+                }
+           }
+       }else{
+            if (this.options.maxSize && (file.size > this.options.maxSize)) {
+                this.showMsg(this.options.limitError);
+                return false;
+            }
+            if (this.options.acceptType.length && this.options.acceptType.indexOf(file.type) === -1) {           
+                this.showMsg(this.options.typeError);
+                return false;
+            }
+       }       
+       return true;
+   }
+   preview () {  
+       const file = Array.from(this.options.previewData);   
+        if (!this.check(file)) return;
+        let promArray = []
+        file.map(item=>{             
+            let temp  = new Promise((resolve,reject)=>{
+                const reader = new FileReader(); 
+                reader.readAsDataURL(item);
+                reader.onload = (e) => {                
+                    this.uploader();
+                    resolve(e)
+                }  
+            })
+            promArray.push(temp)   
+        });
+        Promise.all(promArray).then(res=>{
+            console.log(res)
+            let out = [];
+            if(res){
+                res.map(item=>{
+                    out.push(item.target.result) 
+                })
+            }
+            this.triggerFunc.call(this.options, this.options.onPreview)(out); 
+        }) 
+   }
+   uploader () {
+       const xhr = new XMLHttpRequest();
+       let options = this.options;
+       let formData = options.formData;      
+       
+       
+       if (xhr.upload) {    
+           xhr.upload.addEventListener('progress', (e) => {
+               this.triggerFunc.call(options, options.onProgress)(formData, e.loaded, e.total);
+           }, false);
+           xhr.onreadystatechange = (e) => {              
+               if (xhr.readyState === 4) {                  
+                   if (xhr.status === options.xhrState) {
+                        this.triggerFunc.call(options, options.onSuccess)(formData, xhr.responseText);
+                   } else {
+                        this.triggerFunc.call(options, options.onFailure)(formData, xhr.responseText);
+                   }
+               }
+           };
+           xhr.withCredentials = options.withCredentials;
+           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){
+                options.$el.value = ''  ;
+           }           
+       } else {
+           this.showMsg(this.xmlError)
+       }
+   }
 }
 export default IdaUploader;