微信小程序上传图片实例


Posted in Javascript onMay 28, 2018

在网上看了好多小程序上传图片,java后端接收的示例,但是不管在哪个网站看的,代码基本是一样的,都是代码特别多。

所以就自己写一个比较简单的。

 一 小程序端

user.wxml

<view class='user_head'> 
 <view> 
  <image src='{{ptuser.avatarUrl}}' bindtap='updateHead'></image> 
 </view> 
 <text>点击选择头像</text> 
</view>

user.js

// 更换头像 
span style="font-size:18px;color:#FF0000;"> updateHead: function () { 
  var that = this 
  // 上传图片 获取路径 
  wx.chooseImage({ 
   success: function (res) { 
    console.log('临时路径:' + res.tempFilePaths[0]) 
      wx.uploadFile({ 
       url: app.globalData.baseUrl + '/file/uploadFile', 
       filePath: res.tempFilePaths[0], 
       name: 'file', 
       success: function (result) { 
        console.log("返回路径:" + result.data) 
       } 
      }) 
   }, 
  }) 
 },

 二 java端

package cn.helloxhs.moudle.common; 
 
import java.io.File; 
import java.io.FileInputStream; 
import java.io.FileNotFoundException; 
import java.io.FileOutputStream; 
import java.io.IOException; 
import java.io.InputStream; 
import java.io.OutputStream; 
 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
import org.apache.commons.fileupload.disk.DiskFileItem; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.ResponseBody; 
import org.springframework.web.multipart.MultipartFile; 
import org.springframework.web.multipart.commons.CommonsMultipartFile; 
 
import cn.helloxhs.base.controller.BaseController; 
 
/** 
 * 类说明 
 * 
 * @author 肖荷山 
 * @version 创建时间:2017年12月23日 上午11:14:27 
 */ 
@Controller 
@RequestMapping("/file") 
public class FileController extends BaseController { 
  @RequestMapping("/uploadFile") 
  @ResponseBody 
  public Object uploadFile(HttpServletResponse response, HttpServletRequest request, MultipartFile file) { 
    String realPath = request.getSession().getServletContext().getRealPath("/temp"); 
    try { 
      CommonsMultipartFile cf = (CommonsMultipartFile) file; 
      DiskFileItem fi = (DiskFileItem) cf.getFileItem(); 
      File f1 = fi.getStoreLocation(); 
      InputStream ips = new FileInputStream(f1); 
      OutputStream ops = new FileOutputStream(realPath + "/" + "xhs.jpg"); 
      byte[] b = new byte[1024]; 
      int len; 
      try { 
        while ((len = ips.read(b)) != -1) { 
          ops.write(b, 0, len); 
        } 
      } catch (IOException e) { 
        e.printStackTrace(); 
      } finally { 
        // 完毕,关闭所有链接 
        try { 
          ops.close(); 
          ips.close(); 
        } catch (IOException e) { 
          e.printStackTrace(); 
        } 
      } 
 
    } catch (FileNotFoundException e) { 
      e.printStackTrace(); 
    } 
    return realPath; 
  } 
 
}

图片存在了项目的temp目录下

微信小程序上传图片实例

简单就好,没其他功能,单纯上传图片。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
怎么用javascript进行拖拽
Jul 20 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
讲解vue-router之什么是动态路由
May 28 #Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 #Javascript
微信小程序实现上传图片功能
May 28 #Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 #Javascript
vue-cli构建项目下使用微信分享功能
May 28 #Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 #Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 #Javascript
You might like
php+html5实现无刷新图片上传教程
2016/01/22 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
如何删除一个表里面的重复行
2013/07/13 面试题
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
董事长岗位职责
2013/11/30 职场文书
初二政治教学反思
2014/01/12 职场文书
教师师德考核自我评价
2014/09/13 职场文书
教师自我剖析材料
2014/09/29 职场文书
干部作风建设工作总结
2014/10/29 职场文书
幼师求职自荐信
2015/03/26 职场文书