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


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 相关文章推荐
初识javascript 文档碎片
Jul 13 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
JS中判断null的方法分析
Nov 21 Javascript
解析js如何获取css样式
Dec 11 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
Vue 数据绑定的原理分析
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
mysql 搜索之简单应用
2007/04/27 PHP
php实现cookie加密的方法
2015/03/10 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
JavaScript的Cookies
2008/01/16 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
pygame实现打字游戏
2021/02/19 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python sorted函数原理解析及练习
2020/02/10 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
客服实习的个人自我鉴定
2013/10/20 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
演讲稿格式范文
2014/05/19 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
学校运动会通讯稿
2015/07/18 职场文书
python中的sys模块和os模块
2022/03/20 Python