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


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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
Vue.js基础知识小结
Jan 13 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 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运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
python+Splinter实现12306抢票功能
2018/09/25 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
Django Rest framework权限的详细用法
2019/07/25 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
一套Java笔试题
2016/08/20 面试题
linux面试题参考答案(3)
2012/09/13 面试题
Java面试题汇总
2015/12/06 面试题
会计专业毕业自荐书范文
2014/02/08 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
见义勇为事迹材料
2014/12/24 职场文书
设备技术员岗位职责
2015/04/11 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
MySQL优化及索引解析
2022/03/17 MySQL