微信图片上传

这个是在开发微信公众账号的时候,使用的是微信的接口实现的

1.jsp

                        <div class="weui_cell_bd weui_cell_primary">
                            <div class="weui_uploader">
                                <div class="weui_uploader_hd weui_cell">
                                    <div class="weui_cell_bd weui_cell_primary">图片选择</div>
                                    <div class="weui_cell_ft">0/9</div>
                                </div>
                                <div class="weui_uploader_bd">
                                    <ul class="weui_uploader_files"> </ul>
                                    <div class="weui_uploader_input_wrp">
                                        <div class="weui_uploader_input" id="chooseImage">chooseImage</div>
                                    </div>
                                </div>
                            </div>
                        </div>
<script>
var url = '${url}';
var appId = '${appId}';
var appSecret = '${appSecret}';
var timestamp = '${timestamp}';
var nonceStr = '${nonceStr}';
var signature = '${signature}';
var jsapi_ticket = '${jsapi_ticket}';
</script>

<script id="tmp_preview" type="text/html">
{{each data as localId index}}
<li onClick="previewImage({{index}})" class="weui_uploader_file" style="background-image:url({{localId}})"></li>
{{/each}}
</script>

2.后台微信跳转

public void toIllegalReport() {
		ApiConfig apiConfig = new ApiConfig();
		apiConfig.setAppId(com.wisdombud.weixin.constants.Constants.APP_ID);
		apiConfig.setAppSecret(com.wisdombud.weixin.constants.Constants.APP_SECRET);
		ApiConfigKit.setThreadLocalApiConfig(apiConfig);
		JsTicket jsApiTicket = JsTicketApi.getTicket(JsApiType.jsapi);
		String jsapi_ticket = jsApiTicket.getTicket();
		String nonce_str = create_nonce_str();
		// 注意 URL 一定要动态获取,不能 hardcode.
		String url = com.wisdombud.weixin.constants.Constants.STATIC_URL // 服务器地址
				+ getRequest().getContextPath() // 项目名称
				+ getRequest().getServletPath();// 请求页面或其他地址
		String qs = getRequest().getQueryString(); // 参数
		if (qs != null) {
			url = url + "?" + (getRequest().getQueryString());
		}
		String timestamp = create_timestamp();
		// 这里参数的顺序要按照 key 值 ASCII 码升序排序
		// 注意这里参数名必须全部小写,且必须有序
		String str = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonce_str + "×tamp=" + timestamp + "&url="
				+ url;

		String signature = HashKit.sha1(str);
		// String access_token = com.wisdombud.weixin.constants.Constants.TOKEN;
		setAttr("appId", ApiConfigKit.getApiConfig().getAppId());
		setAttr("appSecret", ApiConfigKit.getApiConfig().getAppSecret());
		setAttr("nonceStr", nonce_str);
		setAttr("timestamp", timestamp);
		setAttr("url", url);
		setAttr("signature", signature);
		setAttr("jsapi_ticket", jsapi_ticket);
		// setAttr("access_token", access_token);
		renderJsp("portal/peccancy-report/page.jsp");
	}

3,js写入   
(我的这种写法是先将图片上传到微信服务器,然后在下载到MongoDB上)

var serverIds = new Array();
var operatePicList = new Array(); //存放图片数组
var fkIllegalReportId;
$(function() {
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: appId, // 必填,公众号的唯一标识
        timestamp: timestamp, // 必填,生成签名的时间戳
        nonceStr: nonceStr, // 必填,生成签名的随机串
        signature: signature, // 必填,签名,见附录1
        jsApiList: ['chooseImage', 'uploadImage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    });
   $("#chooseImage").click(function() {
        wx.chooseImage({
            count: max, // 默认9
            success: function(res) {
                if (res) {
                    if (0 < res.localIds.length) {
                        operatePicList = operatePicList.concat(res.localIds);
                    }
                }
                max = max - res.localIds.length;
                if (max < 1) {
                    $('.weui_uploader_input_wrp').css('display', 'none');
                }
                var html = template('tmp_preview', { "data": operatePicList });
                $('.weui_uploader_files').html(html);
                $('.weui_cell_ft').html((9 - max) + '/' + 9);
            }
        });
    });

function syncUpload() {
        if (!operatePicList.length) {
            //  alert('上传成功!');
            // alert(serverIds.length);
            uploadToMongo(serverIds);
        } else {
            var localId = operatePicList.pop();
            wx.uploadImage({
                localId: localId,
                success: function(res) {
                    serverIds.push(res.serverId);
                    syncUpload();
                }
            });
        }
    }

  $("#submit").click(function() {
 $.ajax({
            type: "POST",
            url: "/home-ajax/illegalReportSubmit",
            data: params,
            dataType: "json",
            async: false,
            success: function(result) {
                fkIllegalReportId = result.data;
                if (operatePicList.length > 0) {

                    syncUpload();
                } else {
                    $.alert("提交成功", function() {
                        $.closeModal();
                        window.location.reload();
                    });
                }
            }
        });

  });

function uploadToMongo(serverIds) {
    $.ajax({
        type: "POST",
        url: "/gridfs/uploadListFromWX",
        data: {
            "serverIds": serverIds.join()
        },
        dataType: "json",
        success: function(data) {
            if (!data) {
                $.alert("图片保存失败!", function() {
                    $.closeModal();
                });
                return;
            }
            data = JSON.stringify(data);

            $.ajax({
                type: "POST",
                url: "/home-ajax/illegalReportFilesSubmit",
                dataType: "json",
                data: {
                    "entity.fkIllegalReportId": fkIllegalReportId,
                    "fileList": data
                },
                success: function(data) {
                    $.alert("提交成功", function() {
                        $.closeModal();
                        window.location.reload();
                    });
                }
            });
        }
    });
}

4.wed后台

package com.wisdombud.hrgaj.actions.wechat;

import java.util.Date;
import java.util.List;
import java.util.Map;

import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Results;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.context.annotation.Scope;

import com.wisdombud.hrgaj.actions.base.AbstractCrudAction;
import com.wisdombud.hrgaj.common.IBaseSrv;
import com.wisdombud.hrgaj.manage.IllegalActivitiesFilesSrv;
import com.wisdombud.hrgaj.pojo.manage.BaseIllegalReportFiles;
import com.wisdombud.hrgaj.util.GsonUtil;
import com.wisdombud.hrgaj.vo.CommonResult;

@Scope("prototype")
@ParentPackage(value = "struts-default")
@Namespace(value = "/")
@Results({})
public class IllegalReportFilesApiAction extends AbstractCrudAction<BaseIllegalReportFiles> {

	@Autowired
	private IllegalActivitiesFilesSrv srv;

	public IllegalReportFilesApiAction(
			@Qualifier(value = "illegalActivitiesFilesSrv") IBaseSrv<BaseIllegalReportFiles> baseSrv) {
		super(baseSrv);
	}

	private static final long serialVersionUID = 1L;

	private String fileList;
	private String fkIllegalReportId;

	@Override
	public void addOrUpdate() {
		try {
			List<BaseIllegalReportFiles> baseIllegalReportFilesList = GsonUtil.jsonToArrayList(fileList,
					BaseIllegalReportFiles.class);
			if (this.isAjaxRequest()) {
				if (null == entity.getFkIllegalReportId() || null == baseIllegalReportFilesList
						|| baseIllegalReportFilesList.size() < 1) {
					CommonResult result = new CommonResult(CommonResult.FAIL, "filelist is null or size < 1");
					this.sendResponseMsg(result);
				} else {
					for (BaseIllegalReportFiles file : baseIllegalReportFilesList) {
						file.setFkIllegalReportId(entity.getFkIllegalReportId());
						file.setId(null);
						file.setCreateTime(new Date());
						file.setLastUpdate(new Date());
						this.baseSrv.save(file);
					}
				}
			}
			sendSuccessMsg();
		} catch (Exception e) {
			sendFailMsg(null, ERROR);
		}
	}

	public String getFkIllegalReportId() {
		return fkIllegalReportId;
	}

	public void setFkIllegalReportId(String fkIllegalReportId) {
		this.fkIllegalReportId = fkIllegalReportId;
	}

	public String getFileList() {
		return fileList;
	}

	public void setFileList(String fileList) {
		this.fileList = fileList;
	}

}



评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值