在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>

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-06-01
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-10-12
  • 2022-12-23
  • 2021-11-08
  • 2021-12-26
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案