Apicloud之如何实现一次上传多张图片

痛定思痛。 2022-02-24 09:46 557阅读 0赞

### ***前提：*** ###

1、APIcloud做前端开发工具

2、加入了UIMediaScanner模块

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

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

* 代码使用安卓系统，ios系统的可以参考一下*

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

## ***代码讲解*** ##

**1、UIMediaScanner模块选择多张图片以后，返回的是一个list集合**

**2、而路径是在list集合的path属性里面**

**3、因此，需要先获取ret.list里面的内容**

var imgs = ret.list;

**4、imgs 的格式如下**

[{"path":"/storage/emulated/0/DCIM/Camera/p-113474e0.jpg"},{"path":"/storage/emulated/0/DCIM/Camera/p-113474e0.jpg"......}]

**5、因此我们需要获取path的值，把这些值放在一个新的数组里面或者覆盖之前的数组数据**

for (var i = 0; i < imgs.length; i++) {
            ipath[i]=imgs[i].path;
         }

6、通过ajax把文件数组传到后台

files: {
              "file":ipath
              }

注意如果后台是php的话，为"file\[\]":ipath；（原因问做这个模块的人）

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

### ***ipath正确的格式如下*** ###

**正确的如下**

![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 2][]

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

### ** 完整的前端代码如下** ###

<!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" />
        <title>一次上传多张图片</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css" />
    </head>
    <body>
      <button onclick="getp()">多个文件的上传</button>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript">
    function getp(){
      var UIMediaScanner = api.require('UIMediaScanner');
      UIMediaScanner.open({
        type: 'picture',
        column: 4,
        classify: true,
        max: 4,
        sort: {
            key: 'time',
            order: 'desc'
        },
        texts: {
            stateText: '已选择*项',
            cancelText: '取消',
            finishText: '完成'
        },
        styles: {
            bg: '#fff',
            mark: {
                icon: '',
                position: 'bottom_left',
                size: 20
            },
            nav: {
                bg: '#eee',
                stateColor: '#000',
                stateSize: 18,
                cancelBg: 'rgba(0,0,0,0)',
                cancelColor: '#000',
                cancelSize: 18,
                finishBg: 'rgba(0,0,0,0)',
                finishColor: '#000',
                finishSize: 18
            }
        },
        scrollToBottom: {
            intervalTime: 3,
            anim: true
        },
        exchange: true,
        rotation: true
      }, function(ret) {
        if (ret) {
         var imgs = ret.list;
         var ipath=new Array();
         for (var i = 0; i < imgs.length; i++) {
            ipath[i]=imgs[i].path;
         }
         alert(ipath);
          morefile(ipath);
        }
      });
    }
    function morefile(ipath){
      api.ajax({
          url: 'http://192.168.0.107:8080/jiekou/pg.action',
          method: 'post',
          data: {
            values:{
              good_name:'软胶囊'
            },
              files: {
              "file":ipath
              }
          }
      },function(ret, err){
          if (ret) {
              alert( JSON.stringify( ret ) );
          } else {
              alert( JSON.stringify( err ) );
          }
      });
    
    }
    </script>
    
    </html>

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

*** 后端也用数组接收文件***

### **本人用的是java做后台服务器，采用的是ssh框架** ###

ssh框架配置就省略了，直接上关键的代码

package cn.com.service;
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.FileNotFoundException;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.util.List;
    import javax.servlet.http.HttpServletResponse;
    import net.sf.json.JSONArray;
    import net.sf.json.JSONObject;
    import org.apache.struts2.ServletActionContext;
    import org.hibernate.Query;
    import org.hibernate.Session;
    import org.hibernate.SessionFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.annotation.Scope;
    import org.springframework.stereotype.Repository;
    import org.springframework.transaction.annotation.Transactional;
    import com.opensymphony.xwork2.ModelDriven;
    import cn.com.bean.Goods;
    import cn.com.tools.RandomStr;
    @Repository(value = "publishGoods")
    @Scope("prototype")
    public class PublishGoods implements ModelDriven<Goods> {
    	@Autowired
    	private SessionFactory sf;
    	@Autowired
    	private Goods goods;
    	//上传文件
    	private File[] file;
    		public File[] getFile() {
    		return file;
    	}
    
    	public void setFile(File[] file) {
    		this.file = file;
    	}
    		//存储在服务器上面的位置
    		String dis="D:/myapp/";
    		//存储在数据库里面的外部链接的代码
    		String purl="http://47.93.217.112:8080/logo/";
    	// 宝贝上架（添加）
    	@Transactional
    	public String pgoods(){
    		int len=file.length;
          System.out.println("文件接收的个数:"+len);
    		//给集合里面的每一个文件拷贝赋值
    		String [] imgs=new String[len];
    			//把文件写到里面
    		FileOutputStream fout=null;
    		InputStream in=null;
    		for (int i = 0; i < len; i++) {
    			String fn=RandomStr.getRandomString(10);
    			//存储图片的地址
    			String cfn=dis+fn+".jpg";
    			imgs[i]=purl+fn+".jpg";
    			File fl=new File(cfn);
    			try {
    			     fout=new FileOutputStream(fl);
    				in=new FileInputStream(file[i]);
    				byte [] by=new byte[1024];
    				int length=0;
    				try {
    					while((length=in.read(by))>-1){
    						fout.write(by, 0, length);
    					}
    				} catch (IOException e) {
    					// TODO Auto-generated catch block
    					e.printStackTrace();
    				}
    			} catch (FileNotFoundException e) {
    				// TODO Auto-generated catch block
    				e.printStackTrace();
    			}
    		  }
    			for (int i = 0; i < imgs.length; i++) {
    				System.out.println(imgs[i]);
    			}
    		// 打开线程安全的session对象
    		Session session = sf.getCurrentSession();
    		goods.setGoods_imgs(imgs);
    		// 创建对象
    		session.save(goods);
    		//范湖数据
    		HttpServletResponse response = ServletActionContext.getResponse();
    		JSONObject json = new JSONObject();
    		json.put("tom", "succ");
    		try {
    			response.getWriter().write(json.toString());
    			
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}finally{
    			try {
    				in.close();
    				fout.close();
    			} catch (IOException e) {
    				// TODO Auto-generated catch block
    				e.printStackTrace();
    			}
    			
    		}
    		return null;
    }
    
    	
    	
    	@Override
    	public Goods getModel() {
    		// TODO Auto-generated method stub
    		return goods;
    	}
    }

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

完成以后，手机上上传的多张图片在电脑的指定的文件夹里面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3][]

数据库的效果如下（数组属性的映射）

![20190403181637759.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4][]

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

写博客的初衷，是做一个电子笔记，方便自己查阅，也为大家做一个参考！

喜欢我就关注我把

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220224/273387b0ce3c4d6eaa361f1c75e003a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220224/ec87115e08cf482da9582540d85cbf30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20220224/3ab6ed85af08428f89a3010f5df4f08c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3]: /images/20220224/d30b22448fdb4aa7bbc35b237c3fc3de.png
[20190403181637759.png]: /images/20220224/a5e4eda74c4441bdb4368e1da766ef7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4]: /images/20220224/30e84c79df0349d8a98a4fb7ab1658cd.png