微信小程序上传图片功能源代码
不懂微信小程序上传图片功能源代码?其实想解决这个问题也不难,下面让小编带着大家一起学习怎么去解决,希望大家阅读完这篇文章后大所收获。
创新互联长期为上1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为江宁企业提供专业的网站建设、成都网站制作,江宁网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。
几乎每个程序都需要用到图片,在小程序中我们可以通过image组件显示图片。
当然小程序也是可以上传图片的,微信小程序文档也写的很清楚。
上传图片
首先选择图片
通过wx.chooseImage(OBJECT)实现
官方示例代码
wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths } })
图片最多可以选择9张, 也可以通过拍摄照片实现,当选择完图片之后会获取到图片路径, 这个路径在本次启动期间有效。
如果需要保存就需要用wx.saveFile(OBJECT)
上传图片
通过wx.uploadFile(OBJECT) 可以将本地资源文件上传到服务器。
原理就是客户端发起一个 HTTPS POST 请求,其中 content-type为 multipart/form-data。
官方示例代码
wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址 filePath: tempFilePaths[0], name: 'file', formData:{ 'user': 'test' }, success: function(res){ var data = res.data //do something } }) } })
示例代码
看完了官方文档, 写一个上传图片就没有那么麻烦了,下面是真实场景的代码
import constant from '../../common/constant'; Page({ data: { src: "../../image/photo.png", //绑定image组件的src //略... }, onLoad: function (options) { //略... }, uploadPhoto() { var that = this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths; upload(that, tempFilePaths); } }) } }) function upload(page, path) { wx.showToast({ icon: "loading", title: "正在上传" }), wx.uploadFile({ url: constant.SERVER_URL + "/FileUploadServlet", filePath: path[0], name: 'file', header: { "Content-Type": "multipart/form-data" }, formData: { //和服务器约定的token, 一般也可以放在header中 'session_token': wx.getStorageSync('session_token') }, success: function (res) { console.log(res); if (res.statusCode != 200) { wx.showModal({ title: '提示', content: '上传失败', showCancel: false }) return; } var data = res.data page.setData({ //上传成功修改显示头像 src: path[0] }) }, fail: function (e) { console.log(e); wx.showModal({ title: '提示', content: '上传失败', showCancel: false }) }, complete: function () { wx.hideToast(); //隐藏Toast } }) }
后端代码
后端是用java写的,一开始的时候,后端开始用了一些框架接收上传的图片,出现了各种问题,后来使用了纯粹的Servlet就没有了问题, 把代码贴出来省的以后麻烦了。
注意: 代码使用了公司内部的框架,建议修改后再使用
public class FileUploadServlet extends HttpServlet { private static final long serialVersionUID = 1L; private static Logger logger = LoggerFactory.getLogger(FileUploadServlet.class); public FileUploadServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { JsonMessage
感谢你能够认真阅读完这篇文章,希望小编分享微信小程序上传图片功能源代码内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
当前标题:微信小程序上传图片功能源代码
文章地址:http://scyanting.com/article/iiiepc.html