新增批量上传多选图片功能

src/views/course/components/stepsBox.vue

@@ -17,7 +17,13 @@
       <div class="tool-box" v-if="tools[step.tool[0]] && canWork.indexOf(step.tool[0]) !== -1" @click="addImg($event)">
         <div class="tool-img"><img :src="tools[step.tool[0]].img" /></div>
         <div class="tool-name">{{ tools[step.tool[0]].name }}</div>
-        <input type="file" accept="image/*" style="display: none" @change="beforeUpload($event, step.tool[0], stepI)" />
+        <input
+          type="file"
+          accept="image/*"
+          multiple
+          style="display: none"
+          @change="beforeUpload($event, step.tool[0], stepI)"
+        />
       </div>
       <div class="tool-box" v-else-if="tools[step.tool[0]]">
         <div class="tool-img"><img :src="tools[step.tool[0]].img" /></div>
@@ -773,14 +779,7 @@ export default {
         type: mime
       })
     },
-    async beforeUpload(event, type, i) {
-      // this.$message.success('进入上传')
-      var file = ''
-      if (type === 5) {
-        file = event
-      } else {
-        file = event.target.files[0]
-      }
+    async moreFile(f,t,i) {
       var credentials = {
         accessKeyId: 'AKIATLPEDU37QV5CHLMH',
         secretAccessKey: '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'
@@ -789,32 +788,32 @@ export default {
       window.AWS.config.region = 'cn-northwest-1' // 设置区域
 
       // eslint-disable-next-line prettier/prettier
-      var bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' }}) // 选择桶
+      var bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' } }) // 选择桶
       var _this = this
       _this.progress = 0
       _this.proVisible = true
       _this.isFinishSize = 0
-      _this.isAllSize = (file.size / 1024 / 1024).toFixed(2)
+      _this.isAllSize = (f.size / 1024 / 1024).toFixed(2)
       var photoA = ['BMP', 'GIF', 'PNG', 'JPGE', 'JPEG', 'JPG', 'TIF', 'PCX', 'TGA', 'EXIF', 'FPX', 'SVG', 'APNG']
 
       if (
-        photoA.indexOf(file.name.split('.')[file.name.split('.').length - 1].toLocaleUpperCase()) !== -1 &&
-        type !== 4
+        photoA.indexOf(f.name.split('.')[f.name.split('.').length - 1].toLocaleUpperCase()) !== -1 &&
+        t !== 4
       ) {
-        file = await this.pngToWhiteBg(file)
-        const blob = await imageConversion.compressAccurately(file, 256)
-        file = new File([blob], file.name, { type: file.type })
+        f = await this.pngToWhiteBg(f)
+        const blob = await imageConversion.compressAccurately(f, 256)
+        f = new File([blob], f.name, { type: f.type })
       }
 
-      if (file) {
+      if (f) {
         var params = {
           Key:
-            file.name.split('.')[0] +
+            f.name.split('.')[0] +
             new Date().getTime() +
             '.' +
-            file.name.split('.')[file.name.split('.').length - 1],
-          ContentType: file.type,
-          Body: file,
+            f.name.split('.')[f.name.split('.').length - 1],
+          ContentType: f.type,
+          Body: f,
           'Access-Control-Allow-Credentials': '*',
           ACL: 'public-read'
         } // key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
@@ -826,13 +825,13 @@ export default {
         }
         bucket
           .upload(params, options)
-          .on('httpUploadProgress', function(evt) {
+          .on('httpUploadProgress', function (evt) {
             // 这里可以写进度条
             // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
             _this.progress = parseInt((evt.loaded / evt.total) * 100)
             _this.isFinishSize = (evt.loaded / 1024 / 1024).toFixed(2)
           })
-          .send(function(err, data) {
+          .send(function (err, data) {
             _this.progress = 100
             _this.isFinishSize = _this.isAllSize
             setTimeout(() => {
@@ -876,7 +875,7 @@ export default {
                 'OGG',
                 'OGM'
               ]
-              if (type === 16) {
+              if (t === 16) {
                 if (
                   c.indexOf(data.Location.split('.')[data.Location.split('.').length - 1].toLocaleUpperCase()) !== -1
                 ) {
@@ -894,7 +893,7 @@ export default {
                   _this.fileType = 3
                 }
                 _this.addCourseWorks(data.Location, i)
-              } else if (type === 50) {
+              } else if (t === 50) {
                 var _ftype = 1
                 if (
                   c.indexOf(data.Location.split('.')[data.Location.split('.').length - 1].toLocaleUpperCase()) !== -1
@@ -914,6 +913,26 @@ export default {
           })
       }
     },
+    async beforeUpload(event, type, i) {
+      // this.$message.success('进入上传')
+      var file = ''
+      if (type === 5) {
+        file = event
+      } else {
+        if (event.target.files.length > 1) {
+          file = event.target.files
+        } else {
+          file = event.target.files[0]
+        }
+      }
+      if (file.length > 1) {
+        for (var z = 0; z < file.length; z++) {
+          this.moreFile(file[z],type,i);
+        }
+      } else {
+        this.moreFile(file,type,i);
+      }
+    },
     async beforeUpload2(event, i) {
       // this.$message.success('进入上传')
       var file = ''
@@ -927,7 +946,7 @@ export default {
       window.AWS.config.region = 'cn-northwest-1' // 设置区域
 
       // eslint-disable-next-line prettier/prettier
-      var bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' }}) // 选择桶
+      var bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' } }) // 选择桶
       var _this = this
       _this.progress = 0
       _this.proVisible = true
@@ -961,13 +980,13 @@ export default {
         }
         bucket
           .upload(params, options)
-          .on('httpUploadProgress', function(evt) {
+          .on('httpUploadProgress', function (evt) {
             // 这里可以写进度条
             // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
             _this.progress = parseInt((evt.loaded / evt.total) * 100)
             _this.isFinishSize = (evt.loaded / 1024 / 1024).toFixed(2)
           })
-          .send(function(err, data) {
+          .send(function (err, data) {
             _this.progress = 100
             _this.isFinishSize = _this.isAllSize
             setTimeout(() => {

src/views/course/index.vue

@@ -146,6 +146,8 @@ export default {
           ).join(',')
           console.log(res)
           this.isLoading = false
+          var a = this.$refs['cBox']
+          a.scrollTop = 0
         })
         .catch(err => {
           console.error(err)
@@ -167,7 +169,7 @@ export default {
     },
     back() {
       // eslint-disable-next-line prettier/prettier
-      this.$router.push({ path: '/courseDetail', query: { courseid: this.courseid }})
+      this.$router.push({ path: '/courseDetail', query: { courseid: this.courseid } })
     },
     onRefresh() {
       this.getCourse()