Springboot与前端图片交互（一）

Springboot与前端图片交互（一）

前端框架:vue，element-ui

后端：springboot

开发需求：前端页面可以上传文件或者图片到服务端，服务端可以接收文件或图片；同时前端可以请求服务端的图片或者文件。为了简单起见，我已图片为例进行开发。

前端

这里我采用element-ui UI框架的upload组件

 <el-upload
      action="http://localhost:8887/post">
      <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>

其中action地址为服务端的请求地址 请求方式默认为post请求（服务端已经做好跨域请求了）

服务端

图片在服务端的保存方式有：

• 在服务端以照片文件的形式存在

• 将图片转码存储到数据库中

  这里我先采用第一张方式进行图片存储

@RestController
@CrossOrigin
public class picService {
    @RequestMapping(value = "/post",method = RequestMethod.POST)
    private void upLoad(@RequestParam MultipartFile file) throws IOException {
        String name =file.getOriginalFilename(); //获取图片的名称
        FileOutputStream picOutput = new FileOutputStream("J:\\"+name);//设置存储路径
        picOutput.write(file.getBytes());//获取字节流直接写入到磁盘内
        picOutput.close();//关闭字节流
    }
}

演示:

网页上传图片

服务端接受图片

从服务端获取图片

@ResponseBody 注解可以将返回的对象放入到 HTTP response body中

produces = MediaType.IMAGE_PNG_VALUE 可以设置返回到body中的数据类型

@RequestMapping(value = "/getpic",method = RequestMethod.POST,produces = MediaType.IMAGE_PNG_VALUE)
    @ResponseBody
    private byte[] getPic() throws IOException {
        FileInputStream picInput = new FileInputStream("J:\\logo.png");
        return picInput.readAllBytes();
    }

采用Postman测试

前端代码

    <el-button @click="btn">显示</el-button>
    <el-image :src="src"></el-image>

        async btn(){
          const res = await Axios({url:"http://localhost:8886/getpic",method:'post',responseType:'blob'})
          let blob = new window.Blob([res.data]);
          let url = window.URL.createObjectURL(blob);
          this.src = url;
        }

由于从服务端传回的数据没有url地址，图片标签无法访问，这里采用将字节流转化为blob，然后用createObjectURL创建url的File对象

responseType:'blob'表示将将返回的字节流转化为blob型

window.URL.createObjectURL将blob类型创建一个url的File对象，供图片取得src地址

前端展示