vue+spring boot上传图片并展示图片

前端上传图片，后端将图片存储在本地，将图片路径存储在数据库

1. 前端

<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>

3. 后端
   使用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>