前言

实现一下图片上传回显功能。

一、实现思路

大致讲一下思路，具体的细节，会在代码中作注释。前端将图片发送到后端，后端将图片存到服务器，然后返回存储图片的地址到前端，前端通过图片地址回显图片。

二、实现代码

1.前端代码

需要注意的点：
1、上传图片的input样式比较固定，所以我决定隐藏input，通过按钮来触发input。隐藏的时候，不能用display:none,因为document.getElementById不能获取。换个思路我就把input的宽、高设置为0。
2、通过document.getElementById().files[0]获取上传的照片，通过fileReader解析图片，并赋值给缩略图的src。

vue代码如下：

<template><div class="test"><!--使用input标签，并通过type和accept属性限定图片类型。--><!--这里这样设计是因为：input这个颜色、样式是固定的，所以我就把它的宽、高设为0，然后通过一个按钮来触发--><!--选择图片时，点击确定后会触发onchange方法，给缩略图url赋值--><input class="uploads" id="select" type="file" v-on:change="changeImg" accept="image/*"/><button class="clicks" v-on:click="select">选择图片</button><button class="clicks" v-on:click="upload">上传图片</button><!--缩略图--><img class="imgs" :src="urls"/><!--回传图片--><img class="imgs" :src="urls1"/></div>
</template>
<script>
export default {name: "test",data(){return {urls: ' ',urls1: ' '}},methods:{changeImg(){let that = this;//新建文件读取对象let reader = new FileReader();//读取上传的图片reader.readAsDataURL(document.getElementById("select").files[0]);//加载reader.onload = function (){//将加载的值赋值给缩略图srcthat.urls = this.result;}},upload(){let that = this;let formdData = new FormData();formdData.append('files',document.getElementById("select").files[0]);that.$axios.defaults.baseURL='http://localhost:8081'that.$axios({method: 'post',url: '/test/upload',data: formdData,headers: {"Content-Type": "multipart/form-data"}//设置Content-Type类型}).then((result) => {console.log(result);that.urls1 = result.data;});},select(){//触发点击inputdocument.getElementById("select").click();}}
}
</script>
<style scoped>
@import "../assets/css/test.css";
</style>

css代码如下：

.test{display: flex;align-items: center;margin-top: 20px;margin-top: 20px;
}
.uploads{width: 0;height: 0;overflow: hidden;
}
.clicks{width: 100px;height: 30px;background-color: #409eff;color: white;border-radius: 5px;border: none;cursor: pointer;margin: 0 0 0 50px;
}
.imgs{width: 100px;height: 100px;margin-left: 50px;
}

2.后端代码

因为是练习，所以后端就不写service层了，直接再controller里面写了。这里要要注意，图片名如果相同，会覆盖掉原来的。可以通过拼接当前时间戳和图片名new Date().getTime()+filename解决。

package com.example.myblog.controller;import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.util.Date;@RestController
@RequestMapping("/test")
public class TestController {@RequestMapping(value="/upload",method={RequestMethod.POST})@ResponseBodypublic String upload(MultipartFile files){//获取图片名称String filename = files.getOriginalFilename();//指定图片存放位置，这里要要注意，图片名如果相同，会覆盖掉原来的。可以通过拼接当前时间戳和图片名解决File file = new File("E:\\apache-tomcat-9.0.60-windows-x64\\images\\test\\"+new Date().getTime()+filename);if(!file.exists()){file.mkdirs();}try {//存储图片files.transferTo(file);} catch (IOException e) {e.printStackTrace();}//图片访问地址String imgUrl = "http://localhost:8084/images/test/"+filename;return imgUrl;}
}