点击图片预览显示图片,直接贴代码
<el-dialog
title="图片预览"
:close-on-click-modal="false"
:append-to-body="true"
:visible.sync="visibleImg">
<div class="modal-content">
<el-row v-if="isShowImgUpload" style="padding-left:100px;padding-right:100px;">
<el-col :span="4" style="color:white">1</el-col>
<el-col :span="16">
<div style="position:relative;background-color: #f0f3fa;">
<img
:src="localUrl"
:preview-src-list="[localUrl]"
style="width:100%;height:100%;"
fit="scale-down"
/>
</div>
</el-col>
<el-col :span="4" style="color:white">1</el-col>
</el-row>
</div>
</el-dialog>
return {
isShowImgUpload:false,
localUrls:"",
visibleImg:false
}
},
点击图片预览
viewImg(row){
this.$nextTick(() => {
this.showImg(row);
});
},
showImg (row) {
this.visibleImg = true;
this.localUrl = row.remarks;
this.isShowImgUpload = true;//呈现本地预览组件
},
重要是我们这里存的url地址其实是两个,一个是filePath,一个是 url
保存文件 用 filePath,显示图片用url,所以上传图片的方法java代码如下
@RequestMapping("/auto/{uuid}")
public ResultMap auto(@PathVariable("uuid") String uuid,@RequestParam MultipartFile file){
if (!file.isEmpty()) {
//设置文件的保存路径
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String filePath = sysConfigService.getValue("filePath") + "\\" + uuid + "\\" + df.format(new Date()) + file.getOriginalFilename();
//http://ip+端口号"+根据自己的需求设置
String url = "http://ip+端口号"+ "\\" +"upload" + "\\" + uuid + "\\" + df.format(new Date()) + file.getOriginalFilename();
File tempFile = new File(filePath);
if (!tempFile.getParentFile().exists()) {
tempFile.getParentFile().mkdirs();
}
try {
file.transferTo(new File(filePath));
} catch (IOException e) {
e.printStackTrace();
return ResultMap.error(-1, "文件上传失败") ;
}
SysFileEntity sysFile = new SysFileEntity();
sysFile.setFileName(file.getOriginalFilename());
sysFile.setFilePath(filePath);//保存图片的路径
sysFile.setFileSize(file.getSize());
sysFile.setFileType(file.getOriginalFilename().split("[.]")[1]);
sysFile.setAttachmentId(uuid);
sysFile.setUploadDate(new Date());
sysFile.setUploadUser(this.getUser().getUsername());
sysFile.setRemarks(url);//显示图片的url,需要回显到前端
sysFileService.insert(sysFile);
}
return ResultMap.ok();
}
完成到这里有一个很重要的问题,图片跨域无法显示,这里我们需要用到nginx映射,在服务器端的nignx配置文件中添加图片的映射地址,以我的为例,把这段添加到nginx.conf中即可。
location /upload{
root d:;
add_header Access-Control-Allow-Origin '*';
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
if ($request_method = 'OPTIONS') {
return 204;
}
需要注意的是这种方式只适用于服务器端,本地开发过程中,上传的图片就无法回显了,但是对我来说影响不大,毕竟客户可以用没有问题我就感激涕零了,谢谢