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


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 相关文章推荐
JavaScript 继承的实现
Jul 09 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
Jquery 效果使用详解
Nov 23 Javascript
js实现简单数字变动效果
Nov 06 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
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
2019十大人气国漫
2020/03/13 国漫
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
python批量同步web服务器代码核心程序
2014/09/01 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python查询IP地址归属完整代码
2017/06/21 Python
Python基于百度云文字识别API
2018/12/13 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
Python如何给函数库增加日志功能
2020/08/04 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
质量承诺书怎么写
2014/05/24 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers