在pojo中对特定的date类型属性加了以下配置
@DateTimeFormat来控制入参,@JsonFormat来控制出参
复制
@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
@DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")
private Date payTime;
参考教程
Spring Boot jackson(Date类型入参、格式化,以及如何处理null)
elementui需要配合得表单为:
<el-date-picker v-model="dataForm.startTime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
:disabled="disable">
</el-date-picker>
图片上传
<el-form-item label="图片1" prop="img1"> <el-input v-model="dataForm.img1" placeholder="图片1"></el-input> <el-upload class="upload-demo" :action="imgUrl" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList1" :on-success="doc1" :on-error="handleAvatarError"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item> <el-form-item label="图片2" prop="img2"> <el-input v-model="dataForm.img2" placeholder="图片2"></el-input> <el-upload class="upload-demo" :action="imgUrl" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList2" :on-success="doc2" :on-error="handleAvatarError"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item> <el-form-item label="图片3" prop="img3"> <el-input v-model="dataForm.img3" placeholder="图片3"></el-input> <el-upload class="upload-demo" :action="imgUrl" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList3" :on-success="doc3" :on-error="handleAvatarError"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item>
vue data
fileList1: [],
fileList2: [],
fileList3: [],
imgUrl: 'http://127.0.0.1:8080/renren-fast/uploads/local',
methoed
handleAvatarError(res, file) {
this.$message.error('文件太大');
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
doc1(res, file) {
this.$message({
message: '上传成功',
type: 'success'
});
if (res.code == 0) {
this.dataForm.img1 = res.msg;
}
},
doc2(res, file) {
this.$message({
message: '上传成功',
type: 'success'
});
if (res.code == 0) {
this.dataForm.img2 = res.msg;
}
},
doc3(res, file) {
this.$message({
message: '上传成功',
type: 'success'
});
if (res.code == 0) {
this.dataForm.img3 = res.msg;
}
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }?`);
},
另一个
<el-table-column prop="img1" header-align="center" align="center" label="图片1"> <template slot-scope="scope"> <img :src="scope.row.img1" style="height: 200px;"/> </template> </el-table-column> <el-table-column prop="img2" header-align="center" align="center" label="图片2"> <template slot-scope="scope"> <img :src="scope.row.img2" style="height: 200px;"/> </template> </el-table-column> <el-table-column prop="img3" header-align="center" align="center" label="图片3"> <template slot-scope="scope"> <img :src="scope.row.img3" style="height: 200px;" /> </template> </el-table-column>