执法人员图片上传

lawenforcement-ui/src/components/ImageUpload/index.vue

@@ -23,8 +23,8 @@
     <!-- 上传提示 -->
     <div class="el-upload__tip" slot="tip" v-if="showTip">
       请上传
-      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
+      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>
       的文件
     </div>
 
@@ -46,9 +46,9 @@
 import {getToken} from "@/utils/auth";
 
 export default {
-    name: 'ImageUpload',
+  name: 'ImageUpload',
   props: {
-      ImageUpload: Function,
+    ImageUpload: Function,
     value: [String, Object, Array],
     // 图片数量限制
     limit: {
@@ -57,7 +57,7 @@ export default {
     },
     // 大小限制(MB)
     fileSize: {
-       type: Number,
+      type: Number,
       default: 10,
     },
     // 文件类型, 例如['png', 'jpg', 'jpeg']
@@ -94,7 +94,7 @@ export default {
           // 然后将数组转为对象数组
           this.fileList = list.map(item => {
             if (typeof item === "string") {
-              item = { name: item, url: item };
+              item = {name: item, url: item};
             }
             return item;
           });
@@ -115,28 +115,28 @@ export default {
   },
 
   methods: {
-      clear: function(){
-          alert('2')
+    clear: function () {
+      alert('2')
 
 
-      },
+    },
     // 删除图片
     handleRemove(file, fileList) {
       const findex = this.fileList.map(f => f.name).indexOf(file.name);
-      if(findex > -1) {
+      if (findex > -1) {
         this.fileList.splice(findex, 1);
         this.$emit("input", this.listToString(this.fileList));
-          // this.ImageUpload.setUrl("")
+        // this.ImageUpload.setUrl("")
       }
     },
     // 上传成功回调
     handleUploadSuccess(res) {
-      this.uploadList.push({ name: res.data.url, url: res.data.webUrl });
+      this.uploadList.push({name: res.data.url, url: res.data.webUrl});
       if (this.uploadList.length === this.number) {
         this.fileList = this.fileList.concat(this.uploadList);
         this.uploadList = [];
         this.number = 0;
-          // this.ImageUpload.setUrl(res.data.url)
+        // this.ImageUpload.setUrl(res.data.url)
         this.$emit("input", this.listToString(this.fileList));
         this.$modal.closeLoading();
       }
@@ -201,17 +201,18 @@ export default {
 <style scoped lang="scss">
 // .el-upload--picture-card 控制加号部分
 ::v-deep.hide .el-upload--picture-card {
-    display: none;
+  display: none;
 }
+
 // 去掉动画效果
 ::v-deep .el-list-enter-active,
 ::v-deep .el-list-leave-active {
-    transition: all 0s;
+  transition: all 0s;
 }
 
 ::v-deep .el-list-enter, .el-list-leave-active {
-    opacity: 0;
-    transform: translateY(0);
+  opacity: 0;
+  transform: translateY(0);
 }
 </style>
 

lawenforcement-ui/src/views/lawenforcement/user/index.vue

@@ -238,6 +238,14 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item label="图片" prop="certificate">
+              <ImageUpload ref="ImageUpload" :limit="1" :fileType="['png', 'jpg', 'jpeg']" :value="form.certificate"
+                           @input="getUrl"></ImageUpload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -405,8 +413,8 @@ export default {
         homeAddress: null,
         certificateNumber: null,
         certificate: null,
-        deptId:null,
-        deptName:null
+        deptId: null,
+        deptName: null
       };
       this.resetForm("form");
     },
@@ -513,7 +521,11 @@ export default {
         this.queryParams.deptName = null
       }
       this.getList();
-    }
+    },
+    getUrl(url) {
+      this.form.certificate = url;
+      console.log(this.form)
+    },
   }
 };
 </script>