apicloud app手机端下载服务器上的文件/图片

ゝ一世哀愁。 2022-02-27 14:08 351阅读 0赞

## **适用背景** ##

**1、**app开发软件做前端如appcan 、apicloud

**2、**java做后端服务器

**3、**数据库存储文件/图片的地址，如果在数据库上存储文件或者图片的话，太占内存了！

可以实现的功能

1、一切涉及图片的功能，发布新闻，查看头像等等

--------------------

## **解决问题的思路** ##

1、apicloud/appcan做前端显示页面，java做后台数据处理，前后台用ajax来衔接

2、我用的是apicloud，里面有一个api.download(\{\})方法，appcan应该也有想应的客户端下载文件的方法

3、服务器上某个文件里面是专门放图片或者文件的 如d盘tjn目录

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

3、java服务器要做的就是把存储在服务器上某盘的**文件的路径如d:/tjn/a.jpg**

**当用户涉及浏览一些动态信息，就从后台下载到手机端的文件夹里面，从文件夹里面获取文件**

**这样做的目的，有的人会不理解，为什么不把图片存储到数据库里，要用的话，就直接从服务器上拿，然后显示在html里面呢？**

**目的****   直接把图片变成base64存储在数据库里面，占内存很大**

--------------------

### 代码展示 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>云API</title>
        <script src="../script/api.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/api.css"/>
        <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    </head>
    <body>
      <button onclick="lp()">下载</button>
    </body>
    <script>
    function lp(){
      api.download({
        url: "http://192.168.0.104:8080/jiekou/hello.action",
        savePath: 'fs://a.jpg',
        report: true,
        cache: true,
        allowResume: true
    }, function(ret, err) {
        if (ret.state == 1) {
            //下载成功
            alert("下载成功");
        } else {
    
        }
    });
    }
    </script>
    </html>

url:连接java后台的地址，可以用postman测试接口是否是好的

我的后台是ssh框架做的，url组成是http://服务器本机ip:端口号/项目名/后台的action请求名称

savePath:存储在手机上的根目录，一般在文件管理-手机-UZMap-一个文件夹和项目的keyid相等的里面（如A6008551266373）

--------------------

java后台服务器

负责把服务器上某盘文件夹里面的文件先读取后写入，返回到前端，

package cn.com.service;
    import java.io.BufferedInputStream;
    import java.io.BufferedOutputStream;
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.io.OutputStream;
    import javax.servlet.http.HttpServletResponse;
    import org.apache.struts2.ServletActionContext;
    import org.springframework.context.annotation.Scope;
    import org.springframework.stereotype.Repository;
    @Repository(value="uploadimg")
    @Scope("prototype")
    public class Uploadimg {
    public String onloads(){
    	//把服务器上的d盘的文件下载到手机端app
    	HttpServletResponse response=null;
    		try {
    			// path是指欲下载的文件的路径。
    			String path="d:/tjn/1.jpg";
    			File file = new File(path);
    			// 取得文件名。
    			String filename = file.getName();
    			// 以流的形式下载文件。
    			InputStream fis = new BufferedInputStream(new FileInputStream(path));
    			byte[] buffer = new byte[fis.available()];
    			fis.read(buffer);
    			fis.close();
    			// 清空response
    			response=ServletActionContext.getResponse();
    			response.reset();
    			// 设置response的Header
    			response.addHeader("Content-Disposition", "attachment;filename=" + new String(filename.getBytes()));
    			response.addHeader("Content-Length", "" + file.length());
    			OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
    			response.setContentType("application/octet-stream");
    			toClient.write(buffer);
    			toClient.flush();
    			toClient.close();
    			System.out.println("正在下载.....");
    			} catch (IOException ex) {
    			ex.printStackTrace();
    			}
    			
    		return null;
    }
    }

至于ssh框架的配置，我就省略了，这里不是重点

在手机端运行以后，电脑d盘tjn文件夹里面的a.jpg被下载到手机里面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220227/35688d147f114e33ba527dd48b64d275.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220227/0856e42348024af8af9f5b6f867f91e0.png