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


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 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
Vertx基于EventBus发送接受自定义对象
Nov 16 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
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
phpquery中文手册
2021/03/18 PHP
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
酒店拾金不昧表扬信
2014/01/18 职场文书
行政助理工作职责范本
2014/03/04 职场文书
团队经理竞聘书
2014/03/31 职场文书
拉歌口号大全
2014/06/13 职场文书
合作协议书范文
2014/08/20 职场文书
七一建党节演讲稿
2014/09/11 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
施工员岗位职责范本
2015/04/11 职场文书
升学宴家长致辞
2015/07/27 职场文书
python not运算符的实例用法
2021/06/30 Python