这次给大家带来如何使用微信小程序做出图片上传,使用微信小程序做出图片上传的注意事项有哪些,下面就是实战案例,一起来看一下。
先来看一下微信小程序的api
来看一下页面效果
查看大图
wxml文件代码:
<view class="weui-cell"> <view class="weui-cellbd"> <view class="weui-uploader"> <view class="weui-uploaderhd"> <view class="weui-uploadertitle">营业执照</view> <view class="weui-uploaderinfo">{{imageList.length}}/{{count[countIndex]}}</view> </view> <view class="weui-uploaderbd"> <view class="weui-uploaderfiles"> <block wx:for="{{imageList}}" wx:for-item="image"> <view class="weui-uploaderfile"> <image class="weui-uploaderimg" src="{{image}}" src="{{image}}" bindtap="previewImage"></image> </view> </block> </view> <view class="weui-uploaderinput-box"> <view class="weui-uploaderinput" bindtap="chooseImage"></view> </view> </view> </view> </view> </view>
js文件代码
chooseImage: function () { var that = this; console.log('aaaaaaaaaaaaaaaaaaaa') wx.chooseImage({ count: this.data.count[this.data.countIndex], success: function (res) { console.log('ssssssssssssssssssssssssss') //缓存下 wx.showToast({ title: '正在上传...', icon: 'loading', mask: true, duration: 2000, success: function (ress) { console.log('成功加载动画'); } }) console.log(res) that.setData({ imageList: res.tempFilePaths }) //获取第一张图片地址 var filep = res.tempFilePaths[0] //向服务器端上传图片 // getApp().data.servsers,这是在app.js文件里定义的后端服务器地址 wx.uploadFile({ url: getApp().data.servsers + '/weixin/wx_upload.do', filePath: filep, name: 'file', formData: { 'user': 'test' }, success: function (res) { console.log(res) console.log(res.data) var sss= JSON.parse(res.data) var dizhi = sss.dizhi; //输出图片地址 console.log(dizhi); that.setData({ "dizhi": dizhi }) //do something }, fail: function (err) { console.log(err) } }); } }) }, previewImage: function (e) { var current = e.target.dataset.src wx.previewImage({ current: current, urls: this.data.imageList }) }
java 后端代码:
//获取当前日期时间的string类型用于文件名防重复 public String dates(){ Date currentTime = new Date(); SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss"); String dateString = formatter.format(currentTime); return dateString; } @RequestMapping("wx_upload.do") public void uploadPicture(HttpServletRequest request, HttpServletResponse response,PrintWriter writer) throws Exception { System.out.println("进入get方法!"); //获取从前台传过来得图片 MultipartHttpServletRequest req =(MultipartHttpServletRequest)request; MultipartFile multipartFile = req.getFile("file"); //获取图片的文件类型 String houzhu=multipartFile.getContentType(); int one = houzhu.lastIndexOf("/"); System.out.println(houzhu.substring((one+1),houzhu.length())); System.out.println(multipartFile.getName()); //根据获取到的文件类型截取出图片后缀 String type=houzhu.substring((one+1),houzhu.length()); System.out.println(multipartFile.getContentType()); String filename; // request.getRealPath获取我们项目的根地址在加上我们要保存的地址 String realPath = request.getRealPath("/upload/wximg/"); try { File dir = new File(realPath); if (!dir.exists()) { dir.mkdir(); } //获取到当前的日期时间用户生成文件名防止文件名重复 String filedata=this.dates(); //生成一个随机数来防止文件名重复 int x=(int)(Math.random()*1000); filename="zhongshang"+x+filedata; System.out.println(x); 将文件的地址和生成的文件名拼在一起 File file = new File(realPath,filename+"."+type); multipartFile.transferTo(file); //将图片在项目中的地址和isok状态储存为json格式返回给前台,由于公司项目中没有fastjson只能用这个 JSONObject jsonObject=new JSONObject(); jsonObject.put("isok",1); jsonObject.put("dizhi","/upload/wximg/"+filename+"."+type); writer.write(jsonObject.toString()); } catch (IOException e) { e.printStackTrace(); } catch (IllegalStateException e) { e.printStackTrace(); } }
来看一下之前在前端js输出的内容:
打开浏览器用我们的服务器的地址加上后台返回json的dizhi字段去访问这张图片
我们可以看到图片已经填入我们的服务器端里了,然后在打开我们服务器端项目根地址下面的/upload/wximg
到这里就大功告成了如果是多张图片上传可以在js里面根据要上传的数量循环上传。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是如何使用微信小程序做出图片上传的详细内容。更多信息请关注PHP中文网其他相关文章!

随着移动互联网技术和智能手机的普及,微信成为了人们生活中不可或缺的一个应用。而微信小程序则让人们可以在不需要下载安装应用的情况下,直接使用小程序来解决一些简单的需求。本文将介绍如何使用Python来开发微信小程序。一、准备工作在使用Python开发微信小程序之前,需要安装相关的Python库。这里推荐使用wxpy和itchat这两个库。wxpy是一个微信机器

小程序能用react,其使用方法:1、基于“react-reconciler”实现一个渲染器,生成一个DSL;2、创建一个小程序组件,去解析和渲染DSL;3、安装npm,并执行开发者工具中的构建npm;4、在自己的页面中引入包,再利用api即可完成开发。

微信小程序是一种轻量级的应用程序,可以在微信平台上运行,不需要下载安装,方便快捷。Java语言作为一种广泛应用于企业级应用开发的语言,也可以用于微信小程序的开发。在Java语言中,可以使用SpringBoot框架和第三方工具包来开发微信小程序。下面是一个简单的微信小程序开发过程。创建微信小程序首先,需要在微信公众平台上注册一个小程序。注册成功后,可以获取到

实现思路x01服务端的建立首先,在服务端,使用socket进行消息的接受,每接受一个socket的请求,就开启一个新的线程来管理消息的分发与接受,同时,又存在一个handler来管理所有的线程,从而实现对聊天室的各种功能的处理x02客户端的建立客户端的建立就要比服务端简单多了,客户端的作用只是对消息的发送以及接受,以及按照特定的规则去输入特定的字符从而实现不同的功能的使用,因此,在客户端这里,只需要去使用两个线程,一个是专门用于接受消息,一个是专门用于发送消息的至于为什么不用一个呢,那是因为,只

PHP与小程序的地理位置定位与地图显示地理位置定位与地图显示在现代科技中已经成为了必备的功能之一。随着移动设备的普及,人们对于定位和地图显示的需求也越来越高。在开发过程中,PHP和小程序是常见的两种技术选择。本文将为大家介绍PHP与小程序中的地理位置定位与地图显示的实现方法,并附上相应的代码示例。一、PHP中的地理位置定位在PHP中,我们可以使用第三方地理位

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了如何在小程序中用公众号模板消息,下面一起来看一下,希望对大家有帮助。

随着小程序的广泛应用,越来越多的开发者需要将其与后台服务器进行数据交互,其中最常见的业务场景之一就是上传文件。本文将介绍在小程序中实现文件上传的PHP后台实现方法。一、小程序中的文件上传在小程序中实现文件上传,主要依赖于小程序APIwx.uploadFile()。该API接受一个options对象作为参数,其中包含了要上传的文件路径、需要传递的其他数据以及

苏州健康码的小程序叫“苏康码”,它是苏州市疫情防控指挥部指定的通行服务码,疫情防控期间在全市范围内通用,可以作为广大民众日常出行的重要凭证,同时作为防疫人员查验的主要依据;也是省内所有来苏逗苏人员以及在苏工作学习生活,旅游或临时停留人员申报的键康申报数据为基础,结合相关数据比对后动态生成的个人电子健康凭证。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

Dreamweaver CS6
视觉化网页开发工具

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),