图片不显示

developerML

liangyongfei 发表于 2017-11-1 14:28
你在文件上添加一个后缀名！然后用图片工具打开试试！这个文件确定是一个图片吗？
...

是这个后端上传代码有什么问题吗？


package x5;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

import javax.naming.NamingException;

import sun.misc.BASE64Decoder;

import com.alibaba.fastjson.JSONObject;
import com.justep.baas.action.ActionContext;
import com.justep.baas.data.sql.SQLException;

public class Uploadphoto {

        public static JSONObject uploadPicfile(JSONObject params, ActionContext context) throws SQLException, NamingException, IOException {

        System.out.println("uploadPicfile is running...");

       String ownerID = params.getString("ownerID");
       String storeFileName = params.getString("storeFileName");                        
       String picData = params.getString("picData");   


           
String baasPath = Thread.currentThread().getContextClassLoader().getResource("").getPath()  ;
String docStorePath = baasPath + File.separator + "x5";

File docstoreDir = new File(docStorePath);
  if(!(docstoreDir.exists() && docstoreDir.isDirectory())){
         docstoreDir.mkdirs();
  }                           

String storePath = docStorePath + File.separator + ownerID;
File storeDir = new File(storePath);
if(!(storeDir.exists() && storeDir.isDirectory())){
        storeDir.mkdirs();
}      

System.out.println("后台计算的baasPath的值："+ baasPath);
System.out.println("后台计算的docStorePath的值："+ docStorePath);  
System.out.println("后台计算的storeDir的值："+ storeDir);

BASE64Decoder decoder = new BASE64Decoder();
try {                  
    byte[] decodedBytes = decoder.decodeBuffer(picData);

    String imgFile = storePath + File.separator + storeFileName;
    FileOutputStream out = new FileOutputStream(imgFile);
    out.write(decodedBytes);
    out.close();
    System.out.println("图片上传成功！");
} catch (Exception e) {
    System.out.println("图片上传失败！");
    e.printStackTrace();
}
return null;
}
        
}

developerML

liangyongfei 发表于 2017-11-1 15:58
嗯！那就是图片上传的时候！图片损害了！导致它已经不是一个图片了！
图片工具都打不开，游览器怎么能打 ...

还是这个JS代码有什么问题？


Model.prototype.button5Click = function(event){

                var data = this.comp("fileData0");
                var filepath = data.val("filePath");
                var userid = data.val("盘点人");
                var storeFileName = justep.UUID.createUUID();


            justep.Baas.sendRequest({
                "url" : "/x5/uploadphoto",  
                "action" : "Uploadphoto",
                "async" : false,
                "params" : {
                        "picData" : filepath,
                        "ownerID" : userid,
                        "storeFileName" : storeFileName
                },
                "success" : function(data) {
                        justep.Util.hint("上传成功");
                }
            });                            
                            
                 data.setValue("photopath", require.toUrl("/baas/x5/showpic/browsePicfile?storeFileName=" + storeFileName + "&ownerID=" + userid + "&operateType=browse"));
                 data.saveData();

        };

liangyongfei

developerML 发表于 2017-11-1 16:08
是这个后端上传代码有什么问题吗？

你先对比下两个文件的大小是否一样？？

代码获取图片数据
String picData = params.getString("picData");   

这样有问题吧！你的图片是一个字符串！肯定不对的！

应该使用文件流的方式！

developerML

liangyongfei 发表于 2017-11-1 16:16
你先对比下两个文件的大小是否一样？？

代码获取图片数据

负暄分享代码就是这样的，可能是我没搞明白代码，如果这样不行，请教怎么改？

Model.prototype.button5Click = function(event){

                var data = this.comp("fileData0");
                var filepath = data.val("filePath"); 我用这个字段存放图片的设备本地存储路径，如何用文件流方式把本地图片传到服务器？
                var userid = data.val("盘点人");
                var storeFileName = justep.UUID.createUUID();


            justep.Baas.sendRequest({
                "url" : "/x5/uploadphoto",  
                "action" : "Uploadphoto",
                "async" : false,
                "params" : {
                        "picData" : filepath,
                        "ownerID" : userid,
                        "storeFileName" : storeFileName
                },
                "success" : function(data) {
                        justep.Util.hint("上传成功");
                }
            });                           
                           
                 data.setValue("photopath", require.toUrl("/baas/x5/showpic/browsePicfile?storeFileName=" + storeFileName + "&ownerID=" + userid + "&operateType=browse"));
                 data.saveData();

        };

liangyongfei

developerML 发表于 2017-11-1 16:51
负暄分享代码就是这样的，可能是我没搞明白代码，如果这样不行，我如何用文件流方式把图片传给服务器呢？
...

你看它调用
     self.uploadPic(imageData);            
传递的参数是一个  base64的字符串！而不是文件流！

base64 也可以上传，最为图片标识！

你的字符串获取是
    var filepath = data.val("filePath");

是一个本地路径！

当然不一样！

developerML

liangyongfei 发表于 2017-11-1 17:16
你看它调用
     self.uploadPic(imageData);            
传递的参数是一个  base64的字符串！而不是文 ...

我想把存储的本地的图片上传上去，能不能在那个案例基础上改为文件流方式？需要改动的前端后端代码复杂吗？

liangyongfei

developerML 发表于 2017-11-1 17:30
如何改为文件流，前端后端都要改吧，复杂吗？

拍照，文件上传  ，输入流的方式！可以参考下
/UI2/system/api/native/demo/test.w

里面有封装 关于文件上传！

拍照获取文件地址 和 获取base64 是不一样的！
http://docs.wex5.com/wex5-app-question-list-2007/

通过读取本地URL地址获取文件的输入流！

最终调用
/UI2/system/api/native/image.js
ft.upload 方法上传的本地文件    location.origin  就是本地环境地址！  改成你的地址就可以了！  另外看下其他的文件上传案例！

developerML

liangyongfei 发表于 2017-11-1 17:41
拍照，文件上传  ，输入流的方式！可以参考下
/UI2/system/api/native/demo/test.w

我基础较差，没看懂/UI2/system/api/native/image.js 图片最终上传到哪里去了？
请指点一下与它对应的后端代码在哪里

liangyongfei

developerML 发表于 2017-11-2 15:44
我基础较差，没看懂/UI2/system/api/native/image.js 图片最终上传到哪里去了？
请指点一下与它对应的后端 ...

require.toUrl(base.config.uploadActionUrl)　　应该就是服务器的ＵＲＬ地址
这个配置文件在这里
/UI2/system/config/config.json
"uploadActionUrl" : "$UI/system/service/doc/common/simpleFileStore.j",

developerML

liangyongfei 发表于 2017-11-1 17:41
拍照，文件上传  ，输入流的方式！可以参考下
/UI2/system/api/native/demo/test.w

麻烦帮看一下我根据自己需求改的/UI2/system/api/native/image.js是否正确，黄色高亮是我改的，其他都没有改动
我理解upload方法的第一个参数是本地图片的存放路径，第二个是上传action的路径，如果我理解错误，请指点一下


                uploadImage : function(param) {
               
                            if (window.cordova) {
                                var self = this;
                                var localId = param && param.localId;
                                if ((!localId)) {
                                        Utils.errorCallback(self, param, {
                                                'errMsg' : "uploadImage:fail",
                                                'resultStr' : "localId missing !"
                                        });
                                        return;
                            }
                            ;

                             //var filename = localId.substring(localId.lastIndexOf("/") + 1);
                               var filename ="菊花.jpg";

                                var successCallback = function(res) {
                                        Utils.successCallback(self, param, {
                                                'serverId' : JSON.stringify({
                                                        "ownerID" : device.uuid,
                                                        "storeFileName" : filename,
                                                        "realFileName" : filename
                                                }),
                                                'errMsg' : "uploadImagek"
                                        });
                                };
                                var failCallback = function(res) {
                                        Utils.errorCallback(self, param, {
                                                'errMsg' : "uploadImage:fail",
                                                'resultStr' : res
                                        });
                                };

                                var ft = new FileTransfer();
                                var params = {};
                                params.fileName = filename;
                                params.storeFileName = filename;
                                params.ownerID = device.uuid;
                             //ft.upload(localId, location.origin + require.toUrl(base.config.uploadActionUrl), successCallback, failCallback, {
                                ft.upload("C:/Users/Public/Pictures/Sample Pictures/菊花.jpg", "/baas/x5/attachment/SimpleFileStore", successCallback, failCallback, {
                                        "fileName" : filename,
                                        "params" : params
                                })

                        }
                },