多文件上传

src/pages/xinrui/common/UploadPicts.vue

@@ -10,6 +10,8 @@
         <div class="li_box iconfont add_pict_icon relative">
           <input
             type='file'
+            name="file"
+            multiple="multiple"
             id='H5moreUp'
             ref='H5moreUp'
             accept='image/*'
@@ -39,22 +41,40 @@ export default {
   },
   methods: {
     loadImg () {
-      // 获取文件
-      let file = document.getElementById('H5moreUp').files[0]
-      // 创建读取文件的对象
-      let reader = new FileReader()
-      // 创建文件读取相关的变量
-      let imgFile
-      // 为文件读取成功设置事件
-      reader.onload = (e) => {
-        imgFile = e.target.result
-        this.num = this.num + 1
-        let obj = {data: imgFile, file: file, num: this.num, photo: file.name}
-        this.photos.push(obj)
+      var files = document.getElementById('H5moreUp').files
+      let _this = this
+      function readAndPreview (file) {
+        if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
+          var reader = new FileReader()
+          reader.addEventListener('load', function (e) {
+            _this.num = _this.num + 1
+            let obj = {data: e.target.result, file: file, num: _this.num, photo: file.name}
+            _this.photos.push(obj)
+          }, false)
+          reader.readAsDataURL(file)
+        }
+      }
+      if (files) {
+        [].forEach.call(files, readAndPreview)
       }
-      // 正式读取文件
-      reader.readAsDataURL(file)
     },
+    // loadImg () {
+    //   // 获取文件
+    //   let file = document.getElementById('H5moreUp').files[0]
+    //   // 创建读取文件的对象
+    //   let reader = new FileReader()
+    //   // 创建文件读取相关的变量
+    //   let imgFile
+    //   // 为文件读取成功设置事件
+    //   reader.onload = (e) => {
+    //     imgFile = e.target.result
+    //     this.num = this.num + 1
+    //     let obj = {data: imgFile, file: file, num: this.num, photo: file.name}
+    //     this.photos.push(obj)
+    //   }
+    //   // 正式读取文件
+    //   reader.readAsDataURL(file)
+    // },
     delPhoto (e) {
       this.photos = this.photos.filter(el => (el.num !== e.num))
     },