微信小程序实现文件、图片上传功能


Posted in Javascript onAugust 18, 2020

本文实例为大家分享了微信小程序实现文件图片上传的具体代码,供大家参考,具体内容如下

在我看来微信小程序的功能挺强大的,提供了很多API让你直接使用。

这里我说一下微信小程序如何实现图片的上传

1、在微信公众号平台设置uploadFile合法域名

点击设置-开发设置,可以看到服务器域名,点击修改,设置一下你的uploadFile合法域名。

微信小程序实现文件、图片上传功能

否则会出现以下错误。

微信小程序实现文件、图片上传功能

2、使用wx.chooseImage和wx.uploadFile实现图片上传

代码如下

wx.chooseImage({
 count: 1, // 默认9
 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
 success: function (res) {
 // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
 var tempFilePaths = res.tempFilePaths;
 wx.uploadFile({
 url: 'https://...', //此处换上你的接口地址
 filePath: tempFilePaths[0],
 name: 'img',
 header: { 
 "Content-Type": "multipart/form-data",
 'accept': 'application/json',
 'Authorization': 'Bearer ..' //若有token,此处换上你的token,没有的话省略
 },
 formData:{
 'user':'test' //其他额外的formdata,可不写
 },
 success: function(res){
 var data=res.data;
 console.log('data');
 },
 fail: function(res){
 console.log('fail');
 
 },
 })
 }
 })

注:目前微信小程序还不支持base64图片上传

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
vue.js中实现登录控制的方法示例
Apr 23 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 Javascript
微信小程序实现图片上传
May 23 #Javascript
WebSocket的简单介绍及应用
May 23 #Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 #Javascript
微信小程序实现的picker多级联动功能示例
May 23 #Javascript
js console.log打印对象时属性缺失的解决方法
May 23 #Javascript
Node.js+ELK日志规范的实现
May 23 #Javascript
jquery+php后台实现省市区联动功能示例
May 23 #jQuery
You might like
一个简洁的多级别论坛
2006/10/09 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
js 居中漂浮广告
2010/03/21 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
德国机车企业:FC-Moto
2017/10/27 全球购物
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
EJB的角色和三个对象
2015/12/31 面试题
美容师的职业规划书
2013/12/27 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
学校食堂标语
2014/10/06 职场文书
2014年药店工作总结
2014/11/20 职场文书
工作岗位职责范本
2015/02/15 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
五年级数学教学反思
2016/02/16 职场文书
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android