全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[伊春seo公司搜久澳]微信小程序内实现上传图片附后端代码

  这次给大家带来微信小程序内实现上传图片附后端代码,微信小程序内实现上传图片的注意事项有哪些,下面就是实战案例,襄阳市小程序开发哪家好一起来看一下。

  

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

  

上传图片

  

首先选择图片

  

通过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'●◆;, //仅为示例,[伊春seo公司搜久澳]非真实的接口地址
 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<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);
 }
}

 

  相信看了本文案例你已经掌握了方法-▷,26 2020.10 [小公司seo]微信小程序如何开发一款小游戏?(实战教程) 如何快速开发一款火爆的小游戏?▽火爆是一个偏运营的词○△■,今天介绍的内容可能更倾向于技术方面,即如何利用微信的开放能力开发一款小游戏。小游戏上线120天时发布了几个,更多精彩请关注久澳传媒编程栏目其它相关文章!

  推荐阅读●…○□:

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

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

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

[伊春seo公司搜久澳]微信小程序内实现上传图片附后端代码

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。