需求:添加商品时,支持上传多张缩略图。
效果:
实现:
(1)前端
<el-form-item label="缩略图" prop="thumb">
<span v-for="item in form.thumb">
<el-popover placement="left" title="" trigger="hover" width="600">
<img :src="item"width="100%"/>
<img slot="reference" :src="item" :alt="item" style="height: 150px;width: 150px; padding: 3px">
</el-popover>
</span>
<!--<el-input v-model="form.thumb" placeholder="请选择缩略图"></el-input>-->
<el-upload
class="upload-demo"
action="#"
ref="upload"
:multiple="true"
accept="image/jpeg,image/jpg,image/png"
:auto-upload="false"
:on-preview="handlePreview"
:on-change="handleChange"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture-card">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
//上传图片涉及到的方法
handleRemove(file, fileList) {
this.fileList=fileList;
//console.log(fileList);
this.$message({
type: 'info',
message: '已删除原有图片',
duration: 1000
});
},
handlePreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleChange(file,fileList){
this.fileList=fileList;
},
create(formName) {
const set = this.$refs;
set[formName].validate(valid => {
if (valid) {
this.formData = new FormData();
for(let x in this.form){
this.formData.append(x,this.form[x]);
}
for(let i=0;i<this.fileList.length;i++){
this.formData.append("file",this.fileList[i].raw);
}
//this.formData.append("isDelete","0");
console.log(this.formData);
addUpload(this.formData)
//addObj(this.form)
.then(() => {
this.dialogFormVisible = false;
this.fileList = [];
this.getList();
this.$notify({
title: '成功',
message: '创建成功',
type: 'success',
duration: 2000
});
})
} else {
return false;
}
});
},
(2)后端
1.controller层
@RequestMapping(value = "/addUpload" , method = RequestMethod.POST)
@ResponseBody
public ObjectRestResponse<Goods> addUpload(@RequestParam("file")MultipartFile[] multipartFiles,Goods goods){
goods.setIsDelete("0");
//调用上传文件的方法
if (multipartFiles.length>0){
String thumn = baseBiz.upload(multipartFiles, request);
goods.setThumb(thumn);
}
//框架封装好的方法
baseBiz.insertSelective(goods);
return new ObjectRestResponse<Goods>();
}
2.biz层
**
* 图片上传
* @param multipartFiles
* @param request
* @return
*/
public String upload(MultipartFile[] multipartFiles, HttpServletRequest request){
//以“,”分割拼接文件的地址
String thumn = "";
//文件的个数
int len = multipartFiles.length;
try {
//获取服务器的地址
//String path = request.getSession().getServletContext().getRealPath("/upload");
//request.getRequestURI().toString();
String path = "F:/imageSource/upload/goods/";
//文件保存的路径
File filePath = new File(path);
System.out.println("文件保存的路径为:"+filePath);
//判断filePath是否存在
if(!filePath.exists() && !filePath.isDirectory()){
//filePath目录不存在,需要创建
filePath.mkdirs();
}
for (int i = 0; i < len; i++) {
//获取文件的原始名称(带格式)
String originalFileName = multipartFiles[i].getOriginalFilename();
//获取文件的类型
String type = originalFileName.substring(originalFileName.lastIndexOf(".")+1);
//获取文件名(不带格式)
String name = originalFileName.substring(0,originalFileName.lastIndexOf("."));
//生成新的文件名
String date = MyTime.getNowDateTime_yyyyMMddHHmmss();
String fileName = date + name + "." + type;
//在指定路径下创建一个文件
File targetFile = new File(path,fileName);
//将文件保存到服务器
multipartFiles[i].transferTo(targetFile);
//拼接文件地址
if(i<len-1){
thumn += "http://localhost:8766/upload/goods/" + fileName + ",";
}else{
thumn += "http://localhost:8766/upload/goods/" + fileName;
}
}
} catch (IOException e) {//文件上传失败
e.printStackTrace();
}
return thumn;
}
3.mapper层
无,使用的是框架封装好的方法
4.mybatis.xml
无,使用的是框架封装好的方法