AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:03:50

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序上传图片(附java后端代码):使用chooseImage,uploadFile ... ...
相关的资讯,希望对您有帮助。

微信小程序上传图片(附java后端代码):使用chooseImage,uploadFile ... ...

作者:于连林520wcf ,来自授权地址;如需转载分享,请在原地址内获得原作者授权;几乎每个程序都需要用到图片。在小程序中我们可以通过image组件显示图片。 当然小程序也是可以上传图片的,微信小程序文档也写的很 ...

作者:于连林520wcf ,来自授权地址;如需转载分享,请在原地址内获得原作者授权;

几乎每个程序都需要用到图片。
小程序中我们可以通过image组件显示图片。

当然小程序也是可以上传图片的,微信小程序文档也写的很清楚。

上传图片

首先选择图片

通过wx.chooseImage(OBJECT)实现

官方示例代码

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

图片最多可以选择9张, 也可以通过拍摄照片实现,当选择完图片之后会获取到图片路径, 这个路径在本次启动期间有效。
如果需要保存就需要用wx.saveFile(OBJECT)

上传图片

通过wx.uploadFile(OBJECT) 可以将本地资源文件上传到服务器。

原理就是客户端发起一个 HTTPS POST 请求,其中 content-type为 multipart/form-data。

官方示例代码


wx.chooseImage({
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: http://example.weixin.qq.com/upload, //仅为示例,非真实的接口地址
      filePath: tempFilePaths[0],
      name: file,
      formData:{
        user: test
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })
  }
})

示例代码

看完了文档, 写一个上传图片就没有那么麻烦了,下面是真实场景的代码

import constant from ../../common/constant;
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
      }
    })
}

后端代码

后端是用java写的,一开始的时候,后端开始用了一些框架接收上传的图片,出现了各种问题,后来使用了纯粹的Servlet就没有了问题, 把代码贴出来省的以后麻烦了。


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 message = new JsonMessage();
        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 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);
    }

}


49阅读 | 0评论
你的回应
写文章

7085