微信小程序上传图片实例


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 添加和移除函数的通用方法
Oct 20 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
redux处理异步action解决方案
Mar 22 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 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 管理系统程序中的后门
2009/08/05 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
Python中线程编程之threading模块的使用详解
2015/06/23 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
金融专业大学生自我评价
2014/01/09 职场文书
初婚初育证明
2014/01/14 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
5行Python代码实现一键批量扣图
2021/06/29 Python
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang