一、技術棧與依賴引入

后端依賴 (pom.xml)

<!-- 百度AI SDK -->
<dependency><groupId>com.baidu.aip</groupId><artifactId>java-sdk</artifactId><version>4.16.19</version><exclusions><exclusion><groupId>org.slf4j</groupId><artifactId>slf4j-simple</artifactId></exclusion></exclusions>
</dependency><!-- 文件處理 -->
<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version>
</dependency>
<dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version>
</dependency>

前端依賴

無需額外依賴，利用原生 HTML5 API 和 Element UI 組件

二、配置文件設置

application.yml 配置

# 百度云人臉識別配置
baidu:face:appId: //apiKey: //secretKey: //imageType: BASE64groupId: 04  # 人臉庫分組名稱# 文件路徑保存
file:upload-dir: D:/community/community-ui/src/photos(這里更改成自己的路徑)# 靜態資源映射
spring:servlet:multipart:max-file-size: 10MBmax-request-size: 10MB

資源映射配置 (WebConfig.java)

@Configuration
public class WebConfig implements WebMvcConfigurer {@Value("${file.upload-dir}")private String uploadDir;@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/photos/**").addResourceLocations("file:" + uploadDir + "/");}
}

三、后端核心實現

1. 百度 AI 工具類 (BaiduAiUtils.java)

@Component
@Slf4j
public class BaiduAiUtils {@Value("${baidu.face.appId}")private String APP_ID;@Value("${baidu.face.apiKey}")private String API_KEY;@Value("${baidu.face.secretKey}")private String SECRET_KEY;@Value("${baidu.face.imageType}")private String IMAGE_TYPE;@Value("${baidu.face.groupId}")private String groupId;private AipFace client;private HashMap<String, Object> options = new HashMap<>();public BaiduAiUtils() {options.put("quality_control", "NORMAL");options.put("liveness_control", "LOW");}@PostConstructpublic void init() {client = new AipFace(APP_ID, API_KEY, SECRET_KEY);}// 人臉注冊public Boolean faceRegister(String userId, String image) {HashMap<String, String> stringOptions = convertToMapString(options);JSONObject res = client.addUser(image, IMAGE_TYPE, groupId, userId, stringOptions);log.info("addUser result ：{}", res);return res.getInt("error_code") == 0;}// 人臉檢測public Boolean faceCheck(String image) {JSONObject res = client.detect(image, IMAGE_TYPE, options);log.info("detect result ：{}", res);if (res.has("error_code") && res.getInt("error_code") == 0) {JSONObject resultObject = res.getJSONObject("result");Integer faceNum = resultObject.getInt("face_num");return faceNum == 1;}return false;}private HashMap<String, String> convertToMapString(HashMap<String, Object> objectMap) {HashMap<String, String> stringMap = new HashMap<>();for (HashMap.Entry<String, Object> entry : objectMap.entrySet()) {stringMap.put(entry.getKey(), entry.getValue().toString());}return stringMap;}
}

2. 實體類 (FaceForm.java)

@Data
public class FaceForm {private Integer personId;private String extName;private String fileBase64;
}

3. 控制器 (PersonController.java)

@RestController
@RequestMapping("/sys/person")
public class PersonController {@Autowiredprivate PersonService personService;@Autowiredprivate BaiduAiUtils baiduAiUtils;@Value("${file.upload-dir}")private String uploadDir;@RequestMapping("/addPerson")public Result addPerson(@RequestBody FaceForm form) {try {Integer personId = form.getPersonId();String fileBase64 = form.getFileBase64();// 1.驗證人員是否存在PersonEntity person = personService.getById(personId);if (person == null) {return Result.error("人員不存在");}// 2.人臉檢測if (!baiduAiUtils.faceCheck(fileBase64)) {return Result.error("未檢測到人臉或多人臉");}// 3.人臉注冊到百度人臉庫boolean aiResult = baiduAiUtils.faceRegister(personId.toString(), fileBase64);if (!aiResult) {return Result.error("人臉注冊到人臉庫失敗");}// 4.保存圖片到本地String fileName = "person_"+personId+"_"+System.currentTimeMillis()+".png";String filePath = Paths.get(uploadDir, fileName).toString();File file = new File(uploadDir);if (!file.exists()) {file.mkdirs();}// 處理Base64數據String base64Data = fileBase64.contains(",") ? fileBase64.split(",")[1] : fileBase64;byte[] imageBytes = Base64.getDecoder().decode(base64Data);Files.write(Paths.get(filePath), imageBytes);// 5.更新人員信息person.setFaceBase(fileBase64);String fullUrl = "http://localhost:8080/photos/" + fileName;person.setFaceUrl(fullUrl);person.setState(2); // 更新為已驗證狀態boolean updateResult = personService.updateById(person);return updateResult ? Result.ok() : Result.error("人臉錄入失敗");} catch (Exception e) {e.printStackTrace();return Result.error("系統異常：" + e.getMessage());}}
}

?前端頁面是如何展示出圖片的，請參考
http://localhost:8080/photos/xxx.png的本地圖片訪問方案-CSDN博客

四、接口說明

人臉采集接口

• 請求 URL:?POST /sys/person/addPerson
• 請求參數:

json

{"personId": 98,"extName": "png","fileBase64": "iVBORw0KGgoAAAANSUhEUgAAAJsAAAC4CAYAAAD0WZ4UAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJ8pt02jBn6wUmcy/39/xgi2nSFeQGzAAAAAElFTkSuQmCC"
}

• 返回結果:

json

{"msg": "操作成功","code": 200
}