个人用户信息认证，身份证文件上传

src/views/business/userVerification/index.vue

@@ -121,13 +121,49 @@
           </el-date-picker>
         </el-form-item>
         <el-form-item :label="$t('business.userManager.userVerification.idCardFront')" prop="idCardFrontImagePath">
-          <el-input v-model="form.idCardFrontImagePath" :placeholder="$t('business.userManager.userVerification.idCardFrontPlaceholder')" />
+          <el-upload
+            class="upload-demo"
+            :action="uploadUrl"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :on-success="handleSuccess_idCardFrontImagePath"
+            :limit="1"
+            :accept="'image/jpg,image/png'"
+            :file-list="fileList"
+            list-type="picture">
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">只能上传JPG/PNG文件，且不超过5M</div>
+          </el-upload>
         </el-form-item>
         <el-form-item :label="$t('business.userManager.userVerification.idCardBack')" prop="idCardBackImagePath">
-          <el-input v-model="form.idCardBackImagePath" :placeholder="$t('business.userManager.userVerification.idCardBackPlaceholder')" />
+          <el-upload
+            class="upload-demo"
+            :action="uploadUrl"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :on-success="handleSuccess_idCardBackImagePath"
+            :limit="1"
+            :accept="'image/jpg,image/png'"
+            :file-list="fileList"
+            list-type="picture">
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">只能上传JPG/PNG文件，且不超过5M</div>
+          </el-upload>
         </el-form-item>
         <el-form-item :label="$t('business.userManager.userVerification.idCardHolding')" prop="userWithIdCardImagePath">
-          <el-input v-model="form.userWithIdCardImagePath" :placeholder="$t('business.userManager.userVerification.idCardHoldingPlaceholder')" />
+          <el-upload
+            class="upload-demo"
+            :action="uploadUrl"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :on-success="handleSuccess_userWithIdCardImagePath"
+            :limit="1"
+            :accept="'image/jpg,image/png'"
+            :file-list="fileList"
+            list-type="picture">
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">只能上传JPG/PNG文件，且不超过5M</div>
+          </el-upload>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -273,6 +309,8 @@ export default {
       form: {},
       //审核参数
       auditForm: {},
+      fileList: [
+      ],
       // 表单校验
       rules: {
         idCardNumber: [
@@ -305,6 +343,12 @@ export default {
   created() {
     this.getList();
   },
+  computed: {
+    // 计算属性：动态生成上传URL
+    uploadUrl() {
+      return `${process.env.VUE_APP_BASE_API}/file/upload`;
+    }
+  },
   methods: {
     /** 查询实名认证列表 */
     getList() {
@@ -369,11 +413,11 @@ export default {
       if (row.id != null){
         this.form = row;
         this.open = true;
-        this.title = this.$("business.userManager.userVerification.verification");
+        this.title = this.$t("business.userManager.userVerification.verification");
       }else {
         this.form.userId = row.userId;
         this.open = true;
-        this.title = this.$("business.userManager.userVerification.verification");
+        this.title = this.$t("business.userManager.userVerification.verification");
       }
     },
     /** 详情按钮操作 */
@@ -387,7 +431,7 @@ export default {
       this.reset();
       this.auditForm = row;
       this.auditOpen = true;
-      this.title = this.$("business.userManager.userVerification.auditVerification");
+      this.title = this.$t("business.userManager.userVerification.auditVerification");
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -398,7 +442,7 @@ export default {
         this.loading = false;
         this.form = response.data;
         this.open = true;
-        this.title = this.$("business.userManager.userVerification.editVerification");
+        this.title = this.$t("business.userManager.userVerification.editVerification");
       });
     },
     /** 提交按钮 */
@@ -483,6 +527,27 @@ export default {
         });
       })
     },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleSuccess_idCardFrontImagePath(response) {
+      if (response.code === 200) {
+        this.form.idCardFrontImagePath = response.data;  // 保存 URL 到表单
+      }
+    },
+    handleSuccess_idCardBackImagePath(response) {
+      if (response.code === 200) {
+        this.form.idCardBackImagePath = response.data;  // 保存 URL 到表单
+      }
+    },
+    handleSuccess_userWithIdCardImagePath(response) {
+      if (response.code === 200) {
+        this.form.userWithIdCardImagePath = response.data;  // 保存 URL 到表单
+      }
+    }
   }
 };
 </script>