前端：
<template>
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
label-width="80px">
<el-form-item label="标题" prop="title">
<el-input v-model="dataForm.title" placeholder="标题"></el-input>
</el-form-item>
<el-form-item label="内容" prop="content">
<el-input v-model="dataForm.content" placeholder="内容"></el-input>
</el-form-item>
<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>
<el-form-item label="点赞数" prop="dianzan">
<el-input v-model="dataForm.dianzan" placeholder="点赞数"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
fileList1: [],
fileList2: [],
fileList3: [],
imgUrl: 'http://127.0.0.1:8080/renren-fast/uploads/local',
visible: false,
dataForm: {
id: 0,
title: '',
content: '',
img1: '',
img2: '',
img3: '',
dianzan: ''
},
dataRule: {
title: [{
required: true,
message: '标题不能为空',
trigger: 'blur'
}],
content: [{
required: true,
message: '内容不能为空',
trigger: 'blur'
}],
img1: [{
required: true,
message: '图片1不能为空',
trigger: 'blur'
}],
img2: [{
required: true,
message: '图片2不能为空',
trigger: 'blur'
}],
img3: [{
required: true,
message: '图片3不能为空',
trigger: 'blur'
}],
dianzan: [{
required: true,
message: '点赞数不能为空',
trigger: 'blur'
}]
}
}
},
methods: {
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 }？`);
},
init(id) {
this.dataForm.id = id || 0
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.$http({
url: this.$http.adornUrl(`/generator/news/info/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({
data
}) => {
if (data && data.code === 0) {
this.dataForm.title = data.news.title
this.dataForm.content = data.news.content
this.dataForm.img1 = data.news.img1
this.dataForm.img2 = data.news.img2
this.dataForm.img3 = data.news.img3
this.dataForm.dianzan = data.news.dianzan
}
})
}
})
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(
`/generator/news/${!this.dataForm.id ? 'save' : 'update'}`),
method: 'post',
data: this.$http.adornData({
'id': this.dataForm.id || undefined,
'title': this.dataForm.title,
'content': this.dataForm.content,
'img1': this.dataForm.img1,
'img2': this.dataForm.img2,
'img3': this.dataForm.img3,
'dianzan': this.dataForm.dianzan
})
}).then(({
data
}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
}
}
}
</script>
后端
package io.renren.upload; import io.renren.common.utils.R; import io.swagger.annotations.Api; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; @Api(tags = "上传相关") @RequestMapping("/uploads") @RestController public class UploadController { @ResponseBody @PostMapping(value="/local") public R testUpload(@RequestParam("file") MultipartFile file) throws IOException { String fileExtension = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")); String originalFilename = file.getOriginalFilename(); String substring = originalFilename.substring(0, originalFilename.indexOf(".")); SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd-HH-mm-ss"); String format1 = format.format(new Date()); String fileName = substring+"-"+format1 + fileExtension; String path ="D:/tomcat8/apache-tomcat-8.0.43/webapps/ROOT/img/"; //检查该路径对应的目录是否存在. 如果不存在则创建目录 File dir=new File(path); if (!dir.exists()) { dir.mkdirs(); } String filePath = path + fileName; System.out.println("filePath: "+filePath); //保存文件 File dest = new File(filePath); if (!(dest.exists())) { file.transferTo(dest); } String uurl= "http://127.0.0.1:8096/img/"+fileName; return R.ok(uurl); } }
