关闭

微信小程序填坑:上传头像;wx.chooseImage,wx.uploadFile

10489人阅读 评论(0) 收藏 举报
分类:
因为wx.chooseImage,wx.uploadFile的组合十分常见,并且极其容易遇到坑;请作者来检查一下是否有问题,因为我看到原文底下有一堆不明代码。。。

上传头像, 使用wx.chooseImage({})后 在使用wx.uploadFile({})结合起来使用.

http://www.wxapp-union.com/portal.php?mod=view&aid=907

http://www.wxapp-union.com/forum.php?mod=viewthread&tid=3454

wx.uploadFile(上传文件)相关问题

示例代码:


Page({
  data: {
    src: "../../image/photo.png",  //绑定image组件的src
     //略...
  },
  onLoad: function (options) {
      //略... 
  },
  uploadPhoto() {
    var that = this; 
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        upload(that, tempFilePaths);
      }
    })
  }
})

function upload(page, path) {
  wx.showToast({
    icon: "loading",
    title: "正在上传"
  }),
    wx.uploadFile({
      url: constant.SERVER_URL + "/FileUploadServlet",
      filePath: path[0], 
      name: 'file',
      header: { "Content-Type": "multipart/form-data" },
      formData: {
        //和服务器约定的token, 一般也可以放在header中
        'session_token': wx.getStorageSync('session_token')
      },
      success: function (res) {
        console.log(res);
        if (res.statusCode != 200) { 
          wx.showModal({
            title: '提示',
            content: '上传失败',
            showCancel: false
          })
          return;
        }
        var data = res.data
        page.setData({  //上传成功修改显示头像
          src: path[0]
        })
      },
      fail: function (e) {
        console.log(e);
        wx.showModal({
          title: '提示',
          content: '上传失败',
          showCancel: false
        })
      },
      complete: function () {
        wx.hideToast();  //隐藏Toast
      }
    })
}

 

后端代码


public class FileUploadServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;
    private static Logger logger = LoggerFactory.getLogger(FileUploadServlet.class);

    public FileUploadServlet() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        JsonMessage<Object> message = new JsonMessage<Object>();
        EOSResponse eosResponse = null;
        String sessionToken = null;
        FileItem file = null;
        InputStream in = null;
        ByteArrayOutputStream swapStream1 = null;
        try {
            request.setCharacterEncoding("UTF-8"); 

            //1、创建一个DiskFileItemFactory工厂  
            DiskFileItemFactory factory = new DiskFileItemFactory();  
            //2、创建一个文件上传解析器  
            ServletFileUpload upload = new ServletFileUpload(factory);

            //解决上传文件名的中文乱码  
            upload.setHeaderEncoding("UTF-8");   
            // 1. 得到 FileItem 的集合 items  
            List<FileItem> items = upload.parseRequest(request);
            logger.info("items:{}", items.size());
            // 2. 遍历 items:  
            for (FileItem item : items) {  
                String name = item.getFieldName();  
                logger.info("fieldName:{}", name);
                // 若是一个一般的表单域, 打印信息  
                if (item.isFormField()) {  
                    String value = item.getString("utf-8");  
                    if("session_token".equals(name)){
                        sessionToken = value;
                    }
                }else {
                    if("file".equals(name)){
                        file = item;
                    }
                }  
            }
            //session校验
            if(StringUtils.isEmpty(sessionToken)){
                message.setStatus(StatusCodeConstant.SESSION_TOKEN_TIME_OUT);
                message.setErrorMsg(StatusCodeConstant.SESSION_TOKEN_TIME_OUT_MSG);
            }
            String userId = RedisUtils.hget(sessionToken,"userId");
            logger.info("userId:{}", userId);
            if(StringUtils.isEmpty(userId)){
                message.setStatus(StatusCodeConstant.SESSION_TOKEN_TIME_OUT);
                message.setErrorMsg(StatusCodeConstant.SESSION_TOKEN_TIME_OUT_MSG);
            }
            //上传文件
            if(file == null){
            }else{
                swapStream1 = new ByteArrayOutputStream();

                in = file.getInputStream();
                byte[] buff = new byte[1024];
                int rc = 0;
                while ((rc = in.read(buff)) > 0) {
                    swapStream1.write(buff, 0, rc);
                }

                Usr usr = new Usr();
                usr.setObjectId(Integer.parseInt(userId));

                final byte[] bytes = swapStream1.toByteArray();

                eosResponse= ServerProxy.getSharedInstance().saveHeadPortrait(usr, new RequestOperation() {

                    @Override
                    public void addValueToRequest(EOSRequest request) {
                        request.addMedia("head_icon_media", new EOSMediaData(EOSMediaData.MEDIA_TYPE_IMAGE_JPEG, bytes));
                    }
                });

                // 请求成功的场合
                if (eosResponse.getCode() == 0) {
                    message.setStatus(ConstantUnit.SUCCESS);
                } else {
                    message.setStatus(String.valueOf(eosResponse.getCode()));
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally{
            try {
                if(swapStream1 != null){
                    swapStream1.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
            try {
                if(in != null){
                    in.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        PrintWriter out = response.getWriter();  
        out.write(JSONObject.toJSONString(message));  
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}





0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

移动前端使用微信js-sdk调用wx.chooseImage()时ios无法回调success方法问题所在

最近在依托于微信开发公司的项目,其中使用到了微信提供的js-sdk的以下接口: 图像接口 拍照或从手机相册中选图接口 wx.chooseImage({ count: 1, // 默认9 ...
  • llf1991
  • llf1991
  • 2016-12-12 10:33
  • 10098

Angularjs开发微信单页面应用时,jssdk选择图片wx.chooseImage时回显是出不来

使用Angularjs开发微信单页面应用时,选择图片wx.chooseImage时回显是出不来,感觉是被Angularjs的$sec拦截,尝试过一下几种方法,最终解决。 1、过滤器 添加过滤器 .fi...
  • gbguanbo
  • gbguanbo
  • 2017-01-09 10:42
  • 3186

微平台开发之(JS-SDK开发图像接口实例)

本文并非是对微信JS-SDK说明文档的复制,而是通过一个简单的例子来更深入的了解使用微信JS-SDK,具体文档请参考官方说明文档《微信JS-SDK说明文档》。微信公众平台面向开发者开放微信内网页开发工...
  • z455457531
  • z455457531
  • 2016-01-26 15:01
  • 5041

微信小程序 wx.uploadFile 的编码坑

编写微信小程序时,用到 wx.uploadFile,用来上传图片+文本信息.然而在编写过程中,由于官方的 demo 和文档描述很少,在几个坑上耗费了不少时间. 这里分享一个和编码有关的.
  • chwlfg
  • chwlfg
  • 2016-12-02 16:38
  • 15376

微信小程序把玩(三十一)wx.uploadFile(object), wx.downloadFile(object) API

反正我是没有测通这两个API!!!!不知道用的方式不对还是其他的!!!先记录下回头再说。。。主要方法:wx.uploadFile(OBJECT)上传wx.downloadFile(OBJECT)下载w...
  • u014360817
  • u014360817
  • 2016-09-27 21:00
  • 9017

微信小程序-wx.uploadFile

微信小程序-wx.uploadFile
  • u011422798
  • u011422798
  • 2016-11-09 14:23
  • 4322

wx.uploadFile 返回值

wx.request  的返回值 会自动成为  object wx.uploadFile 的返回值是 String 字符串 。 但取返回值时,如果是 JSON 要注意用 JSON....
  • u013078295
  • u013078295
  • 2017-07-06 11:48
  • 583

微信小程序 wx.uploadFile无法上传解决办法

微信小程序 wx.uploadFile无法上传解决办法 微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到。 我也因为一直不能解决,硬着头皮提交审核最后被...
  • jian_xi
  • jian_xi
  • 2017-07-31 22:35
  • 1490

php处理微信小程序wx.uploadFile(OBJECT)发送过来的文件

业务场景: 用户修改自己的头像 问题1、wx.uploadFile(OBJECT)发送过来的文件type是application/octet-stream,不能简单的从type中获得文件的后缀解决...
  • SakuraLLj
  • SakuraLLj
  • 2016-10-19 14:54
  • 3725

微信:小程序学习笔记(3)

这几天断断续续查看小程序的开发。在熟悉的过程,发现微信提供的这个开发工具还没完善,提示代码几乎无法玩。这套东西也是基于vscode。为何不在单独的vscode完善一下?对于维护这套ide而言,对web...
  • hero82748274
  • hero82748274
  • 2016-09-27 18:52
  • 2026
    个人资料
    • 访问:2960489次
    • 积分:28791
    • 等级:
    • 排名:第213名
    • 原创:122篇
    • 转载:1964篇
    • 译文:0篇
    • 评论:260条
    最新评论