微信小程序实现上传照片代码实例解析
更新时间：2020年08月04日 15:18:10 作者：大专栏
这篇文章主要介绍了微信小程序实现上传照片代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
纸上谈坑
在我实现了这个功能之前，我讲讲我是怎么在这个坑里爬上来的：
我实现上传文件后端的接口的参数是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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
这篇文章主要介绍了千分位数字格式化的JS代码，有需要的朋友可以参考一下2013-12-12
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
这篇文章主要介绍了KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定的相关资料,需要的朋友可以参考下2016-10-10
下面小编就为大家带来一篇原生JS查找元素的方法(推荐)。小编觉得挺不错的，希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-11-11
Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。本文通过实例代码给大家讲解Bootstrap所支持的表单控件，感兴趣的朋友一起学习吧2016-05-05
下面小编就为大家带来一篇js动态添加的DIV中的onclick事件简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
下面小编就为大家带来一篇JS获取字符对应的ASCII码实例。小编觉得挺不错的，现在就想给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
javascript设计模式 – 享元模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 享元模式,结合实例形式分析了javascript享元模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了使用JS轻松实现ionic调用键盘搜索功能(超实用)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
我们在编写 JS 代码时,经常会遇到逻辑判断复杂的情况,这篇文章主要给大家介绍了关于JavaScript如何优化逻辑判断代码的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要为大家详细介绍了js实现图片切割功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论