MYSQL,JAVA,VUE

Question

问题遇到的现象和发生背景

怎么从MYSQL中存取图片并且在前端渲染？

用代码块功能插入代码，请勿粘贴截图。 不用代码块回答率下降 50%

数据库截图：

后台链接数据库代码：

 public List<Food> findall(){
        Connection connection = JDBCTool.getConnection();
        ResultSet resultSet ;
        PreparedStatement preparedStatement ;
        //编写一个food
        List<Food> foods = new ArrayList<Food>();
        //编写sql语句
        try {
            String sql = "select * from menu  ";
            //预处理
            preparedStatement = connection.prepareStatement(sql);
            //执行sql将结果返回
            //executeQuery()方法执行查询,返回结果集对象
            //executeUpdate()方法执行增删改操作,返回受影响的行数
            resultSet =preparedStatement.executeQuery();
            while (resultSet.next()){
                Integer id =resultSet.getInt(1);
                String name = resultSet.getString(2);
                //接受picture对象，并且转化为二进制
                String picture = resultSet.getString(3);
//                InputStream in = picture.getBinaryStream();
//                byte[] b = new byte[in.available()];
//                int picture0=in.read(b);

                float  price = resultSet.getFloat(4);
                //将结果封装成对象
                Food food = new Food(id,name, picture,price);
                foods.add(food);
                System.out.println(food);
            }

        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
        JDBCTool.release(connection,preparedStatement,resultSet);
        return foods;//返回food类型集合
    }

服务端代码

``` protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //获取session
        HttpSession session = request.getSession();
        //设置传值的编码
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("utf-8");
        response.setContentType("image/jpeg");
        //调用方法来返回foods集
        List<Food> foods = menuService.findall();
        //返回值存入session
        session.setAttribute("values",foods);
        //将JAVA对象转为 JSON
        response.getWriter().write(JSON.toJSONString(foods));
    }

前端Vue代码：

 new Vue({
       el:"#app",
       data(){
           return {foods: []}
       },
       //回应类型为二进制
       responseType: 'arraybuffer',
       responseType: 'blob',
       mounted(){
           const _this = this;//将this升级为vue的this
           axios({
               headers:{'Content-Type':'application/x-www-form-urlencoded'},
               method:"post",
               url:"http://localhost:8080/HomeWork/managerfindallServlet",
           }).then(function (key) {
               _this.foods = key.data;
               console.log(_this.foods )
               // console.log(_this.foods[0].picture)  578625
               // console.log(_this.foods.length )   9
               // console.log(window.URL.createObjectURL(new Blob([_this.foods[0].picture])));
               //前端转二进制为url  注意window.URL.createObjectURL(new  Blob([]))函数
               for (let i=0;i<_this.foods.length;i++){
                   _this.foods[i].picture=window.URL.createObjectURL(new  Blob([_this.foods[i].picture]));
                   console.log(  _this.foods[i].picture)
               }
           })
       }
   })



HTML代码：
<div id="app" >
        <div class="col-sm-6 col-md-4" v-for="food in foods">
            <div class="thumbnail">
                <img :src="food.picture">
                <div class="caption">
                    <h5>{{food.name}}</h5>
                    <h5>编号:{{food.id}} 单价:{{food.price}}</h5>
<%--                    <h5>购买数量:{{food.buynum}}</h5>--%>
                    <p><a href="#" class="btn btn-primary" role="button">修改</a> <a href="#" class="btn btn-danger" role="button">删除</a></p>
                </div>
            </div>
        </div>
    </div>

运行结果及详细报错内容

浏览器输出结果：

我的解答思路和尝试过的方法，不写自己思路的，回答率下降 60%

前端一直渲染不成功，不知道哪里的问题，希望能教教我！

Answer 1

直接以流的形式返回就行，前端获取到流进行解析后渲染

outputStream = response.getOutputStream();
        response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
        response.setContentType("application/x-msdownload");
        response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
        inputStream = new BufferedInputStream(new FileInputStream(“D\\桌面\\照片\\夫妻肺片.png”));
        byte[] buffer = new byte[1024];
        int len;
        while ((len = inputStream.read(buffer)) != -1) {
            outputStream.write(buffer, 0, len);
            outputStream.flush();
        }
        outputStream.close();

另外，建议文件路径不要有中文。