照片上传

1. 业务数据校验
2. 展示文案优化

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

@@ -11,10 +11,10 @@
     "
   >
     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-      <el-form-item label="关联场景" prop="kindergartenId" required>
+      <el-form-item label="场景" prop="kindergartenId">
         <SceneSelect v-model="form.kindergartenId" :clearable="false" />
       </el-form-item>
-      <el-form-item label="关联活动">
+      <el-form-item label="活动">
         <ActivitySelect
           v-model="form.activityId"
           :kindergartenId="form.kindergartenId"
@@ -23,7 +23,7 @@
         />
       </el-form-item>
 
-      <el-form-item label="图片" prop="urls" required>
+      <el-form-item label="图片">
         <el-upload
           action
           :http-request="upload"
@@ -40,10 +40,12 @@
         >
           <i class="el-icon-upload"></i>
           <div class="el-upload__text">
-            将文件拖到此处，或
-            <em>点击上传</em>
+            将照片拖到此处，或<em>点击上传</em>
+          </div>
+          <div slot="tip" class="el-upload__tip">
+            <el-row>注意事项：</el-row>
+            <el-row>1. 上传照片大小要在1MB ~ 100MB之间哦!</el-row><!-- todo -->
           </div>
-          <div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
         </el-upload>
 
         <el-progress
@@ -75,15 +77,13 @@ export default {
       modal: true,
 
       form: {
-        kindergartenId: null,
-        activityId: '',
-        urls: []
+        kindergartenId: '',
+        activityId: ''
       },
       rules: {
         kindergartenId: [
-          { required: true, message: '请选择关联场景', trigger: 'blur' }
-        ],
-        urls: [{ required: true, message: '请上传图片', trigger: 'change' }]
+          { required: true, message: '请选择场景', trigger: 'blur' }
+        ]
       },
 
       fileList: [], // 文件列
@@ -100,7 +100,7 @@ export default {
   methods: {
     // 文件超出个数限制时的钩子
     handleExceed(files, fileList) {
-      this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
+      this.$message.warning(`每次只能上传 ${this.limit} 张照片`);
     },
     // 点击文件列表中已上传的文件时的钩子
     handlePreview(file) {},
@@ -127,55 +127,57 @@ export default {
       //   this.$message.error("请上传正确的视频格式");
       //   return false;
       // }
-      const isLt100M = file.size / 1024 / 1024 > 5 && file.size / 1024 / 1024 < 1024;
+      const isLt100M = file.size / 1024 / 1024 > 1 && file.size / 1024 / 1024 < 100;
       if (!isLt100M) {
-        this.$message.error("上传照片大小要在5MB ~ 1GB之间哦!");
+        this.$message.error("上传照片大小要在1MB ~ 100MB之间哦!");
         return false;
       }
       const isLt30 = file.name.length < 30;
       if (!isLt30) {
-        this.$message.error('上传视频文件名称长度必须要小于30个文字哦!');
-        return false;
-      }
-      if (!this.form.kindergartenId) {
-        this.$error('请先选择幼儿园');
+        this.$message.error('上传照片名称长度必须要小于30个文字哦!');
         return false;
       }
     },
     // http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现
     upload(file) {
       const _that = this;
-      async function multipartUpload() {
-        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;
+      this.$refs.form.validate(async valid => {
+        if (!valid) {
+          return false;
+        }
 
-        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);
-          });
-      }
+        async function multipartUpload() {
+          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);
+            });
+        }
 
-      multipartUpload();
+        multipartUpload();
+      })
     },
     async saveData(obj) {
       console.log(obj);