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

所属分类: 网络编程 / JavaScript 阅读数: 1630
收藏 0 赞 0 分享

纸上谈坑

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

我实现上传文件后端的接口的参数是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>

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

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多