调整代码

src/views/photographerManagement/photoVerify/modal/ali-oss-multi.vue

@@ -20,6 +20,7 @@
       :on-success="handleSuccess"
       :on-exceed="handleExceed"
       drag
+      multiple
       :limit="limit"
       :file-list="fileList"
     >
@@ -36,23 +37,23 @@
 </template>
 
 <script>
-import { client , getFileNameUUID  } from "@/utils/ali-oss"; //前面的ali-js文件内的两个封装函数
+import { client , getFileNameUUID  } from "@/utils/ali-oss"; // 前面的ali-js文件内的两个封装函数
 
 export default {
   name: "Upload",
   props: {
     limit: {
       type: Number,
-      default: 1
+      default: 30
     }
   },
   data() {
     return {
-      title: '阿里云OSS上传',
+      title: '批量上传照片',
       modal: true,
 
-      fileList: [],//文件列
-      showProgress: false,//进度条的显示
+      fileList: [], // 文件列
+      showProgress: false, // 进度条的显示
       dataObj: {
         region: 'oss-cn-guangzhou',
         accessKeyId: 'LTAI5t8FMLXGzU4pTi9GXWb6',
@@ -79,7 +80,7 @@ export default {
     handleSuccess(response, file, fileList) {
       this.fileList = fileList;
     },
-    //文件上传前的校验
+    // 文件上传前的校验
     beforeAvatarUpload(file) {
       // if (["video/mp4"].indexOf(file.type) == -1) {
       //   this.$message.error("请上传正确的视频格式");
@@ -98,7 +99,7 @@ export default {
     },
     // http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现
     Upload(file) {
-      const that = this;
+      const _that = this;
       async function multipartUpload() {
         let temporary = file.file.name.lastIndexOf(".");
         let fileNameLength = file.file.name.length;
@@ -108,22 +109,25 @@ export default {
         );
         let fileName = getFileNameUUID() + "." + fileFormat;
 
-        client(that.dataObj).multipartUpload(`tmp/${fileName}`, file.file, {
+        client(_that.dataObj).multipartUpload(`tmp/${fileName}`, file.file, {
           progress: function(p) {
-            //p进度条的值
+            // todo 每个文件一个进度条？？？如何限定关联的业务参数（幼儿园id、活动id）
+            // p进度条的值
             console.log(p);
-            that.showProgress = true;
-            that.progress = Math.floor(p * 100);
+            _that.showProgress = true;
+            _that.progress = Math.floor(p * 100);
           }
         })
         .then(result => {
           //上传成功返回值，可针对项目需求写其他逻辑
+          // todo 这里每完成一个文件，会回调一次。这里请求服务端保存业务。照片信息 + 幼儿园 + 活动...
           console.log(result);
         })
         .catch(err => {
           console.log("err:", err);
         });
       }
+
       multipartUpload();
     }
   }