vue+springboot实现图片的上传及回显失败问题的解决
程序员文章站
2022-05-31 10:56:02
...
vue+springboot实现图片的上传及回显失败问题的解决
<div class="upload">
<input type="file" id="saveImage" accept="image/png,image/gif,image/jpeg" ref="new_image">
<input type="text" hidden id="hiddenContent" v-model="picAddress">
<input type="button" value="上传头像" @click="submitPhoto()"/>
<div class="photo">
<img :src="url" class="img" >
</div>
</div>
submitPhoto():
submitPhoto() {
let self = this;
if (self.$refs.new_image.files.length !== 0) {
let formData = new FormData();
formData.append('image_data', self.$refs.new_image.files[0]);
this.$axios.post('api/user/uploadPhoto', formData)
.then(res => {
let imgUrl = res.data;
this.uploadPhotot(imgUrl);
})
}
},
这里的imgUrl就是图片的路径,可以在浏览器中直接访问得到的。
uploadPhoto就是把图片路径及其他数据存到数据库的方法。
springboot中这样写:
@PostMapping("/uploadPhoto")
@ApiOperation(value = "上传头像", notes = "上传头像")
public String uploadPhoto(@RequestParam(name = "image_data", required = false) MultipartFile file) throws IOException {
// 文件上传
String imageName = file.getOriginalFilename();
String newCompanyImagePath = "";
if (!file.isEmpty()) {
try {
//D:\\Program Files (x86)\\workspace-spring-tool-suite-4-4.6.2.RELEASE\\csi\\src\\main\\resources\\static\\img\\
newCompanyImagePath = "D:\\Program Files (x86)\\workspace-spring-tool-suite-4-4.6.2.RELEASE\\csi\\src\\main\\resources\\static\\img\\"
+ imageName;
File newFile = new File(newCompanyImagePath);
if (!newFile.exists()) {
newFile.createNewFile();
}
BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(newFile));
out.write(file.getBytes());
out.flush();
out.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
return "图片上传失败!";
} catch (IOException e) {
e.printStackTrace();
return "图片上传失败!";
}
}
String imagePath = "http://localhost:8888/static/img/" + imageName;
return imagePath;
}
上面的newCompanyImagePath 就是该项目中存放图片的文件夹的绝对路径
项目结构如下:
还有一个问题就是新上传一张图片之后,回显会失败,要刷新后端项目img文件夹,重新运行项目才能显示出来,怎么解决这个问题呢?
这里我们可以通过虚拟路径映射的方法来解决。
在后端项目中添加一个类:
//新增加一个类用来添加虚拟路径映射
@Configuration
public class MyPicConfig implements WebMvcConfigurer{
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/img/**")
.addResourceLocations("file:D:/Program Files (x86)/workspace-spring-tool-suite-4-4.6.2.RELEASE/csi/src/main/resources/static/img/");
}
}
下一篇: PopupWindow封装(下)
推荐阅读
-
如何用input标签和jquery实现多图片的上传和回显功能
-
HTML5实现简单图片上传所遇到的问题及解决办法
-
获取用户上传的图片的本地路径实现方法,解决fakepath路径问题
-
vue中实现ueditor上传图片遇到的几个问题及解决方案
-
关于jsp版ueditor1.2.5的部分问题解决(上传图片失败)
-
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法_php实例
-
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法_php实例
-
如何用input标签和jquery实现多图片的上传和回显功能
-
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法,yii2umeditor_PHP教程
-
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法,yii2umeditor