前置条件

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

@@ -10,9 +10,8 @@
       }
     "
   >
-    <el-form ref="form" :model="form"  label-width="100px">
-
-<el-form-item label="关联场景" prop="kindergartenId">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="关联场景" prop="kindergartenId">
         <SceneSelect v-model="form.kindergartenId" :clearable="false" />
       </el-form-item>
       <el-form-item label="关联活动">
@@ -22,45 +21,48 @@
           :firstLoad="false"
           :disabled="form.kindergartenId === null"
         />
-      </el-form-item>  
+      </el-form-item>
 
       <el-form-item label="图片" prop="urls" required>
-    <el-upload
-      action
-      :http-request="Upload"
-      :before-upload="beforeAvatarUpload"
-      :on-preview="handlePreview"
-      :before-remove="beforeRemove"
-      :on-remove="handleRemove"
-      :on-success="handleSuccess"
-      :on-exceed="handleExceed"
-      drag
-      multiple
-      :limit="limit"
-      :file-list="fileList"
-    >
-      <i class="el-icon-upload"></i>
-      <div class="el-upload__text">
-        将文件拖到此处，或
-        <em>点击上传</em>
-      </div>
-      <div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
-    </el-upload>
+        <el-upload
+          action
+          :http-request="Upload"
+          :before-upload="beforeAvatarUpload"
+          :on-preview="handlePreview"
+          :before-remove="beforeRemove"
+          :on-remove="handleRemove"
+          :on-success="handleSuccess"
+          :on-exceed="handleExceed"
+          drag
+          multiple
+          :limit="limit"
+          :file-list="fileList"
+        >
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">
+            将文件拖到此处，或
+            <em>点击上传</em>
+          </div>
+          <div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
+        </el-upload>
 
-    <el-progress v-show="showProgress" :text-inside="true" :stroke-width="15" :percentage="progress"></el-progress>
+        <el-progress
+          v-show="showProgress"
+          :text-inside="true"
+          :stroke-width="15"
+          :percentage="progress"
+        ></el-progress>
       </el-form-item>
-
     </el-form>
-
   </el-dialog>
 </template>
 
 <script>
-import { client , getFileNameUUID  } from "@/utils/ali-oss"; // 前面的ali-js文件内的两个封装函数
+import { client, getFileNameUUID } from '@/utils/ali-oss'; // 前面的ali-js文件内的两个封装函数
 import { saveItem } from '@/api/photoWarehouse';
 
 export default {
-  name: "Upload",
+  name: 'Upload',
   props: {
     limit: {
       type: Number,
@@ -76,7 +78,7 @@ export default {
         kindergartenId: null,
         activityId: '',
         urls: []
-      },      
+      },
 
       fileList: [], // 文件列
       showProgress: false, // 进度条的显示
@@ -84,7 +86,7 @@ export default {
         region: 'oss-cn-guangzhou',
         accessKeyId: 'LTAI5t8FMLXGzU4pTi9GXWb6',
         accessKeySecret: 'Hz6WOXIVNfpdMphYtf3laHbVoasGlT',
-        bucket: 'yxl-kindergarten',
+        bucket: 'yxl-kindergarten'
       }, //存签名信息
       progress: 0 //进度条数据
     };
@@ -120,54 +122,58 @@ export default {
       //   this.$message.error("上传视频大小要在10MB~1GB之间哦!");
       //   return false;
       // }
-      if(!this.form.kindergartenId) {
-        this.$error('请先选择幼儿园')
+      if (!this.form.kindergartenId) {
+        this.$error('请先选择幼儿园');
       }
 
       const isLt30 = file.name.length < 30;
       if (!isLt30) {
-        this.$message.error("上传视频文件名称长度必须要小于30个文字哦!");
+        this.$message.error('上传视频文件名称长度必须要小于30个文字哦!');
         return false;
       }
     },
     // http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现
     Upload(file) {
+      if (!this.form.kindergartenId) {
+        this.$error('请先选择幼儿园');
+        return false;
+      }
       const _that = this;
       async function multipartUpload() {
-        let temporary = file.file.name.lastIndexOf(".");
+        let temporary = file.file.name.lastIndexOf('.');
         let fileNameLength = file.file.name.length;
         let fileFormat = file.file.name.substring(
           temporary + 1,
           fileNameLength
         );
-        let fileName = getFileNameUUID() + "." + fileFormat;
-
-        client(_that.dataObj).multipartUpload(`tmp/${fileName}`, file.file, {
-          progress: function(p) {
-            // todo 每个文件一个进度条？？？如何限定关联的业务参数（幼儿园id、活动id）
-            // p进度条的值
-            console.log(p);
-            _that.showProgress = true;
-            _that.progress = Math.floor(p * 100);
-          }
-        })
-        .then(result => {
-          //上传成功返回值，可针对项目需求写其他逻辑
-          // todo 这里每完成一个文件，会回调一次。这里请求服务端保存业务。照片信息 + 幼儿园 + 活动...
-          console.log(result);
-          _that.saveData(result);
-        })
-        .catch(err => {
-          console.log("err:", err);
+        let fileName = getFileNameUUID() + '.' + fileFormat;
 
-        });
+        client(_that.dataObj)
+          .multipartUpload(`tmp/${fileName}`, file.file, {
+            progress: function(p) {
+              // todo 每个文件一个进度条？？？如何限定关联的业务参数（幼儿园id、活动id）
+              // p进度条的值
+              console.log(p);
+              _that.showProgress = true;
+              _that.progress = Math.floor(p * 100);
+            }
+          })
+          .then(result => {
+            //上传成功返回值，可针对项目需求写其他逻辑
+            // todo 这里每完成一个文件，会回调一次。这里请求服务端保存业务。照片信息 + 幼儿园 + 活动...
+            console.log(result);
+            _that.saveData(result);
+          })
+          .catch(err => {
+            console.log('err:', err);
+          });
       }
 
       multipartUpload();
     },
     async saveData(obj) {
-      console.log(obj)
-      const params  = {
+      console.log(obj);
+      const params = {
         kindergartenId: this.form.kindergartenId,
         activityId: this.form.activityId,
         fileRequest: {
@@ -176,10 +182,10 @@ export default {
           size: 100,
           path: obj.name
         }
-      }
+      };
       const { success, msg } = await saveItem(params);
       if (success) {
-      }      
+      }
     }
   }
 };