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


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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
js实现整体缩放页面适配移动端
Mar 31 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
javascript 写类方式之六
2009/07/05 Javascript
JS跨域总结
2012/08/30 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python BS4库的安装与使用详解
2018/08/08 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
什么是Python变量作用域
2020/06/03 Python
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
党员批评与自我批评
2014/02/12 职场文书
家长会主持词
2014/03/26 职场文书
python实现会员管理系统
2022/03/18 Python
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript
MySQL中order by的执行过程
2022/06/05 MySQL
Python如何将list中的string转换为int
2022/07/15 Ruby