解决前端el-date-picker选择时间晚8小时，上传到后端后时间不匹配问题_el-date-picker选择时间和传递时间不一致

项目场景：

前端：vue3 elementui-plus
后端：Springboot + MongoDB
前端使用el-date-picker选择时间，上传到后端后，发现时间晚8小时

---

问题描述：

前端代码：

        <el-date-picker
            v-model="tempTypicalForm['Time']"
            type="datetime"
        />
1
2
3
4

此情况下，当选择时间如下：

检查实际发送的数据：

发现时间不匹配，应该是UTC之类的时间，慢了8小时

---

解决方案1：

修改前端代码如下：

 <el-date-picker
            value-format="YYYY-MM-DD hh:mm:ss"
            v-model="tempTypicalForm['Time']"
            type="datetime"
        />
1
2
3
4
5

此时发送的数据变为了：

与实际选择的值匹配。

后端代码参考：

    @JsonFormat(locale = "zh", timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
    LocalDateTime Time;
1
2

修改后能够成功保存

解决方案2：

后端进行修改：
工具类：

 public static LocalDateTime conv2LocalDateTime(String str){
        Instant instant = Instant.parse(str);
        LocalDateTime localDateTime = LocalDateTime.ofInstant(instant, ZoneId.systemDefault()); // 转换为系统默认时区的 LocalDateTime
        return localDateTime;
    }
1
2
3
4
5

使用：

LocalDateTime startTime = conv2LocalDateTime(pages.getStartTime());
1

接口定义：

    @Schema(description = "开始时间")
    String startTime;
1
2