微信小程序实现上传照片代码实例解析


Posted in Javascript onAugust 04, 2020

纸上谈坑

在我实现了这个功能之前,我讲讲我是怎么在这个坑里爬上来的:

我实现上传文件后端的接口的参数是String类型的

前台传的参数:http://tmp/wx忽略很多字母数字.png

但由于这张是本地照片url(外网无法访问),我后台拿到的是一个String类型,是没有办法是去识别这是一张图片的,访问不了这个数据,仅仅把它当做字符串而已。(低级错误)

代码实现

前言:后端接受文件有2种方式(参数): 1. MultipartFile 2.base64

微信上传文件的开发文档

小程序代码

<!-- index.wxml -->
<view>
 <view>文件上传</view>
 <view>
  <input id="file" type="file" bindtap="uploader"></input>
 </view>
</view>


// index.js
Page({
 data: {
  
 },
 uploader: function () {
  wx.chooseImage({
   count: 1,
   success: function(res) {
    let imgPath = res.tempFilePaths[0]
    wx.uploadFile({
     url: 'http://localhost:8080/customerRegister/uploadPricture',
     filePath: imgPath,
     name: 'files',
     success:res=>{
      console.log(res)
     }
    })
   } 
  })
 },
})

java后端代码

@RequestMapping(value = "/customerRegister",produces = "application/json;charset=utf-8")
public class {

  @RequestMapping("/uploadPricture")
  @ResponseBody
  public String uploadPricture(@RequestParam("file") MultipartFile[] file) throws IOException {
    MultipartFile multipartFile = file[0];
    System.out.println("图片名称:"+multipartFile.getOriginalFilename());
    
    InputStream inputStream = multipartFile.getInputStream();
    return "{"mas":"ok"}";
  }

P.s. 注意:这是一个ssm项目,因此你需要在pom.xml中添加依赖和在springmvc.xml中添加以下代码(这个问题搞了我几个小时,因为少了上传文件的配置,就会导致multipartfile这个类失效)

<!--pom.xml 文件上传所需要的依赖-->
 <dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
 </dependency> 
 <!--springmvc.xml-->
   <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 -->
   <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
     <property name="defaultEncoding" value="UTF-8"></property>
     <!-- 指定所上传的总大小不能超过1T。注意maxUploadSize属性的限制不是针对单个文件,而是所有文件 -->
     <property name="maxUploadSize" value="10485760000" />
     <property name="maxInMemorySize" value="40960" />
   </bean>

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

Javascript 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
js生成随机数方法和实例
Jan 17 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 #Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 #Javascript
解决vue addRoutes不生效问题
Aug 04 #Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 #Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 #Javascript
Jquery cookie插件实现原理代码解析
Aug 04 #jQuery
解决vue自定义指令导致的内存泄漏问题
Aug 04 #Javascript
You might like
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
vue实现计算器功能
2020/02/22 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
Python对象的属性访问过程详解
2020/03/05 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
美国在线珠宝商店:SZUL
2017/02/11 全球购物
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
校长个人总结
2015/03/03 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
Python实现的扫码工具居然这么好用!
2021/06/07 Python
Mysql事务索引知识汇总
2022/03/17 MySQL