后台上传图片，前端页面如何显示呢？

不羁的风

图1 ， 第一张图是后台上传数据的页面，仿外卖后台管理做的。
图2 ， 第二张图是前端显示数据的页面，类似于外卖的列表页。

图3， 第三张是 点击 图2 list组件 的行 进入详细页 ，问题就出在这里。
如何让图3显示相应的图片呀？
图1和图2都能实现，就是在图3 详细页显示对应的图片出问题

不羁的风

图3 ：  image控件：bind-attr-src="$model.transUrl(newsData.val('picture'))"

Model.prototype.transUrl = function(picture) {
                 if(!picture)
                 return null;
                 var src = null;
                 if (picture !== null && picture !== "" && picture !== "[]") {
                         var imageJson = eval("("+picture+")");
                         var realFileName = imageJson.realFileName;
                         var storeFileName = imageJson.storeFileName;
                         var operateType = "browse";
                         var url = this.actionUrl + '?realFileName=' + realFileName + '&storeFileName=' + storeFileName;
                         src = require.toUrl(url);
                 }

                 return src;
        };


数据库中字段内容：[{"storeFileName":"C7149680646000019FF3D7A858B01007","realFileName":"Apple.png"}]

user_a

虽然不知道你再说什么看起很吊的样子 哈哈哈···

不羁的风

GET http://localhost:8080/baas/hy/attachment/Classes?realFileName=undefined&storeFileName=undefined 500 (Internal Server Error)

这个是打开详细页的报错信息

1. package hy;
   
2. 
   
3. import java.io.File;
   
4. import java.io.FileInputStream;
   
5. import java.io.IOException;
   
6. import java.io.OutputStream;
   
7. import java.sql.SQLException;
   
8. 
   
9. import javax.naming.NamingException;
   
10. import javax.servlet.http.HttpServletRequest;
    
11. import javax.servlet.http.HttpServletResponse;
    
12. 
    
13. import com.alibaba.fastjson.JSONObject;
    
14. import com.justep.baas.action.ActionContext;
    
15. 
    
16. public class Classes {
    
17.         private static final int BUFFER_SIZE = 32768 * 8;        
    
18.     public static JSONObject browsePicfile(JSONObject params, ActionContext context) throws SQLException, NamingException, IOException {
    
19.             
    
20.              System.out.println("browsePicfile is running...");
    
21.              HttpServletRequest request = (HttpServletRequest)context.get(ActionContext.REQUEST);
    
22.              HttpServletResponse response = (HttpServletResponse)context.get(ActionContext.RESPONSE);
    
23. 
    
24.              //String baasPath = Thread.currentThread().getContextClassLoader().getResource("").getPath() ;
    
25.              //String docStorePath = baasPath + ".." + File.separator + ".."+ File.separator + "model" +File.separator + "UI2" +File.separator + "touxiang" +File.separator+"img" ;
    
26.             
    
27.              String baasPath = Thread.currentThread().getContextClassLoader().getResource("").getPath() + ".." + File.separator + "..";
    
28.              String docStorePath = baasPath + File.separator + "model" +File.separator + "UI2" +File.separator + "69hsAdmin" +File.separator + "data" + File.separator + "attachmentSimple";
    
29.             
    
30.              String realFileName = request.getParameter("realFileName");
    
31.              String storeFileName = request.getParameter("storeFileName");
    
32.                     
    
33.             File file = new File(docStorePath + File.separator +realFileName + File.separator + storeFileName);
    
34.             FileInputStream fis = new FileInputStream(file);
    
35.    
    
36.                     response.setHeader("Cache-Control", "pre-check=0, post-check=0, max-age=0");                        
    
37.                     String fileNameKey = "filename";               
    
38.                     response.addHeader("Content-Disposition", "inline; "+fileNameKey+"="" + storeFileName + """);
    
39.                     
    
40.                     OutputStream os = response.getOutputStream();
    
41.             byte[] buffer = new byte[BUFFER_SIZE];
    
42.             try {
    
43.                 int read;
    
44.                 while ((read = fis.read(buffer)) != -1) {
    
45.                         os.write(buffer, 0, read);
    
46.                 }
    
47.             } finally {
    
48.                 fis.close();
    
49.             }
    
50.             return null;
    
51.     }
    
52. }
    

复制代码

hecr

Model.prototype.transUrl = function(picture) {
                 if(!picture)
                 return null;
                 var src = null;
                 if (picture !== null && picture !== "" && picture !== "[]") {
                         var imageJson = eval("("+picture+")");
                         var realFileName = imageJson.realFileName;
                         var storeFileName = imageJson.storeFileName;
                         var operateType = "browse";
                         var url = this.actionUrl + '?realFileName=' + realFileName + '&storeFileName=' + storeFileName;
                         src = require.toUrl(url);
                 }

                 return src;
        };

楼主以chrome中用js调试跟踪一下这段代码， 应该是realFileName和storeFileName返回undefined导致的， 因为imageJson是数组，需要改成
                         var realFileName = imageJson[0].realFileName;
                         var storeFileName = imageJson[0].storeFileName;

不羁的风

hecr 发表于 2016-5-24 13:09
Model.prototype.transUrl = function(picture) {
                 if(!picture)
                 return ...

原来是这样的  GET http://localhost:8080/baas/hy/attachment/Classes?realFileName=undefined&storeFileName=undefined 500 (Internal Server Error)

hecr知道之后，参数可以传过来了
GET http://localhost:8080/baas/hy/attachment/Classes?realFileName=new5.png&storeFileName=C7145A8BA56000014CEDB2C01000F670 500 (Internal Server Error)

不羁的风

知道==指导

不羁的风

不羁的风 发表于 2016-5-24 11:33
GET http://localhost:8080/baas/hy/attachment/Classes?realFileName=undefined&storeFileName=undefined  ...

为什么参数能传过来了  还是报错500啊？

hecr

这时， 你可以具体看看服务端，根据具体的错误分析一下，