vue+spring boot上传图片并展示图片
前端上传图片,后端将图片存储在本地,将图片路径存储在数据库前端<el-form-item label="资质证书" prop="file3"><el-uploadname="资质证书"class="avatar-uploader"ref="upload3"action:http-request="httpRequest3":show-file-list="false":on-ch
·
前端上传图片,后端将图片存储在本地,将图片路径存储在数据库
- 前端
<el-form-item label="资质证书" prop="file3">
<el-upload
name="资质证书"
class="avatar-uploader"
ref="upload3"
action
:http-request="httpRequest3"
:show-file-list="false"
:on-change="handleChange3"
:before-upload="beforeAvatarUpload"
:on-exceed="handleExceed"
:limit="1"
>
<img v-if="imageUrl3" :src="imageUrl3" class="avatar" style="width: 500px">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<script>
//用于上传时展示图片
handleChange3(res) {
this.imageUrl3 = URL.createObjectURL(res.raw);
},
//判断图片格式和大小
beforeAvatarUpload(file) {
let isPhoto = true;
if(file.type=='image/jpeg'||file.type=='image/png'||file.type=="image/jpg"||file.type=="image/pjpeg"||file.type=="image/gif"||file.type=="image/bmp"||file.type=="image/x-png"){
isPhoto = true;
}else{
isPhoto = false;
}
//const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isPhoto) {
this.$message.error('只能上传 JPG/PNG/gif/bmp 格式图像!');
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
}
return isPhoto && isLt2M;
},
//将图片添加到file里
httpRequest3(option) {
this.form.file3.push(option)
},
onSubmit(formName){
const params = new FormData();
//将option.file添加到params中
this.form.file3.forEach((x)=>{
params.append('file3',x.file)
})
//然后axios调用后端接口上传图片
}
</script>
- 后端
使用MultipartFile接收前端的图片文件,
存储图片:
public static String savePhoto(MultipartFile multipartFile, Long dataString, String staticPath) {
//String realPath = ClassUtils.getDefaultClassLoader().getResource("static").getPath() + staticPath;
//为了不重复,时间戳作为图片名称
String fileNameString = dataString + ".jpg";
File savedFile = new File(staticPath, fileNameString);
//logger.info("保存图片--------->" + savedFile.getPath());
try {
FileUtils.copyInputStreamToFile(multipartFile.getInputStream(), savedFile);
} catch (IOException e) {
e.printStackTrace();
}
return staticPath + fileNameString;
}
然后将图片路径存储到数据库中
5. 获取图片路径并展示
在浏览器中使用file://opt/mfp/uploadFile/certificate1可以显示图片
在vue中用src:这个地址展示不出来
所以换一种方法:
后端先配置虚拟路径
//图片存储路径为:/opt/mfp/uploadFile/certificate1
//数据库中存储/certificate1
//前端使用/image/certificate1就可以访问到后端图片
@Configuration
public class MyWebAppConfiguration implements WebMvcConfigurer {
//定制资源映射
@CrossOrigin
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//意思是:url中读取到/image时,就会自动将/image解析成D:/idea/java_workspace/image/upload
registry.addResourceHandler("/image/**").addResourceLocations("file:/opt/mfp/uploadFile/");
/**
* Linux系统
* registry.addResourceHandler("/upload/**").addResourceLocations("file:/home/image/upload/");
*/
}
}
前端配置跨域
'/image':{
target: 'http://localhost:29917/', // 设置被替换代理的目的域名与端口
//secure: true, // 设置是否允许 https接口
changeOrigin: true, // 设置是否允许接口跨域
pathRewrite: {
'^/image': '/image' // 设置路径重写的代理名称,这里用代理名称代替target里面的 地址
}
},
然后展示图片:
<img :src=this.certificate1 width="500px">
<script>
//在获取数据请求后
this.certificate1 = "/image"+this.res.certificate1
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)