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

前提：

1、APIcloud做前端开发工具

2、加入了UIMediaScanner模块

代码使用安卓系统，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正确的格式如下

正确的如下

错误的如下，失之毫厘差之千里

完整的前端代码如下

<!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;
	}
}

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

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

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

喜欢我就关注我把

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

前提：

代码讲解

ipath正确的格式如下

完整的前端代码如下

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

猜你喜欢