欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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 就是该项目中存放图片的文件夹的绝对路径
项目结构如下:
vue+springboot实现图片的上传及回显失败问题的解决
还有一个问题就是新上传一张图片之后,回显会失败,要刷新后端项目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/");
    }
}