2022微信小程序内实现上传图片附后端代码

 所属分类:php教程

 浏览:113次-  评论: 0次-  更新时间:2022-10-08
描述:更多教程资料进入php教程获得。 这次给大家带来微信小程序内实现上传图片附后端代码,微信小程序内实现上传图片的注意事项有哪些,下面就是...
更多教程资料进入php教程获得。 这次给大家带来微信小程序内实现上传图片附后端代码,微信小程序内实现上传图片的注意事项有哪些,下面就是实战案例,一起来看一下。

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

上传图片

首先选择图片

通过wx.chooseImage(OBJECT)实现

程序员必备接口测试调试工具:立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试,同时在线协作,内容实时同步

官方示例代码

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);
 }
}登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注zzsucai.com其它相关文章!

推荐阅读:

关于js的三种使用方式案例详解(附代码)

如何使用微信小程序做出图片上传

以上就是微信小程序内实现上传图片附后端代码的详细内容,更多请关注zzsucai.com其它相关文章!

积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!