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


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插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
微信小程序个人中心的列表控件实现代码
Apr 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
python对excel文档去重及求和的实例
2018/04/18 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
python 把列表转化为字符串的方法
2018/10/23 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
安全事故检讨书
2014/01/18 职场文书
文艺晚会策划方案
2014/06/11 职场文书
校园标语大全
2014/06/19 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
公历12个月名称的由来
2022/04/12 杂记