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


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 相关文章推荐
js 小数取整的函数
May 10 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 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
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
javascript每日必学之多态
2016/02/23 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
原生js实现购物车功能
2020/09/23 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Python 字符串池化的前提
2020/07/03 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
法学专业自我鉴定
2014/02/05 职场文书
廉洁校园实施方案
2014/05/25 职场文书
护理专业自荐书
2014/06/04 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
详解Vue router路由
2021/11/20 Vue.js
Go 中的空白标识符下划线
2022/03/25 Golang