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


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 相关文章推荐
JQuery live函数
Dec 24 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
Promise扫盲贴
2019/06/24 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
python设置检查点简单实现代码
2014/07/01 Python
Python中的元类编程入门指引
2015/04/15 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python中six模块基础用法
2019/12/08 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
活动总结模板大全
2015/05/11 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
2016年教师新年寄语
2015/08/18 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
Python基本的内置数据类型及使用方法
2022/04/13 Python