apicloud app选择手机相册相机图片上传到服务器

版权声明：博客知识产权来源命运的信徒，切勿侵权 https://blog.csdn.net/qq_37591637/article/details/88823759

效果图是这样的

点击修改头像，会出现选项

 

 

---

 apicloud HTML代码

 <img src="" id="avatar"/>
   <input type="button" value="修改头像" onclick="showAction();"/>

---

 apicloud  js代码

<script>
//调用手机相册和相机
var imgSrc="";
function showAction(){
    api.actionSheet({
        title: '上传头像',
        cancelTitle: '取消',
        buttons: ['拍照','从手机相册选择']
    }, function(ret, err) {
        if (ret) {
            getPicture(ret.buttonIndex);
        }
    });
}
//获取相机还是相册
function getPicture(sourceType) {
    var user=$api.getStorage('username');
    if(sourceType==1){ // 拍照
        //获取一张图片
        api.getPicture({
            sourceType: 'camera',  //拍照
            encodingType: 'png',
            mediaValue: 'pic',
            allowEdit: false,
            //destinationType: 'base64',  //返回base64地址
            quality: 90,
            saveToPhotoAlbum: true
        }, function(ret, err) {
            //var imgSrc = ret.base64Data;  如果是base64，要用这个属性获取地址
            // 获取拍照数据并处理
            if (ret) {
                imgSrc = ret.data;
                if (imgSrc != "") {
                    var ele=$api.dom('#avatar');
                    $api.attr(ele,'src',imgSrc);
                    //最后一步
                    //ajax
                    api.ajax({
                        url: 'http://192.168.0.107:8080/jiekou/cim.action',
                        method: 'post',
                        data: {
                            values: {
                                name: user
                            },
                            files: {
                                file: imgSrc
                            }
                        }
                    },function(ret, err){
                        if (ret) {
                          alert("上传成功");
                        }
                    });

                    //ajax
                    //最后一步
                }
            }
        });
    }else if(sourceType==2){ // 从相册中选择
      api.getPicture({
          sourceType: 'album', //从相册中选择
          encodingType: 'jpg',
          mediaValue: 'pic',
          allowEdit: false,
          //destinationType: 'base64',  //返回base64地址
          quality: 90,
          saveToPhotoAlbum: true
      }, function(ret, err) {
          // 获取拍照数据并处理
            //var imgSrc = ret.base64Data;  如果是base64，要用这个属性获取地址
            if (ret) {
                  imgSrc = ret.data;
                if (imgSrc != "") {
                    var ele=$api.dom('#avatar');
                    $api.attr(ele,'src',imgSrc);
                    //最后一步
                    //ajax
                    api.ajax({
                        url: 'http://192.168.0.107:8080/jiekou/cim.action',
                        method: 'post',
                        data: {
                            values: {
                                name: user
                            },
                            files: {
                                file: imgSrc
                            }
                        }
                    },function(ret, err){
                        if (ret) {
                          alert("上传成功");
                        }
                    });

                    //ajax
                    //最后一步
                }
            }
      });
    }

}

//调用手机相册和相机
//
</script>

---

 后端处理

1、java服务器(ssh框架)

2、接收图片，把图片放在服务器的一个盘的文件里面，因为如果存储在数据库里面，很占内存

3、数据库里面就放一些图片的地址

---

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 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.User;
import cn.com.tools.RandomStr;
@Repository(value = "copyImage")
@Scope("prototype")
public class CopyImage implements ModelDriven<User>{
	@Autowired
	private SessionFactory sf;
	@Autowired
	private User user;
	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return user;
	}
	private File file;
	public File getFile() {
		return file;
	}
	public void setFile(File file) {
		this.file = file;
	}
	@Transactional
	public String GenerateImage(){
	//upload_aa00f2d2_bb13_4737_8033_f1394d1b0911_00000000.tmp
	System.out.println("文件名:"+file.getName());
	//把文件写到里面
	String fn=RandomStr.getRandomString(10);
	//存储图片的地址
	fn="D:/myapp/"+fn+".jpg";
	File fl=new File(fn);
	FileOutputStream fout=null;
	InputStream in=null;
	try {
	     fout=new FileOutputStream(fl);
		in=new FileInputStream(file);
		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();
	}finally{
		try {
			in.close();
			fout.close();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}
	//图片放在服务器的一个盘里面，因为如果是把图片以流的形式存储在数据库里面，就太占内存了
	Session session=sf.getCurrentSession();
	String names=user.getUsername();
	System.out.println("user:"+names);
	String sql="update User set userlogo=? where username=?";
	Query query=session.createQuery(sql);
	query.setString(0, fn);
	query.setString(1, names);
	int rr=query.executeUpdate();
	String toast="";
	if(rr>1){
		toast="succcess";	
	}else{
		toast="fail";		 
	}
	//图片放在服务器的一个盘里面，因为如果是把图片以流的形式存储在数据库里面，就太占内存了
		return null;
	}
	
}