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


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 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
微信小程序实现图片上传
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
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php简单日历函数
2015/10/28 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
python实现堆栈与队列的方法
2015/01/15 Python
Python中如何获取类属性的列表
2016/12/26 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
python实现简单中文词频统计示例
2017/11/08 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
电子商务专业个人的自我评价
2013/12/19 职场文书
读书之星事迹材料
2014/05/12 职场文书
企业总经理任命书
2014/06/05 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
交心谈心活动总结
2015/05/11 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
变长双向rnn的正确使用姿势教学
2021/05/31 Python
Django drf请求模块源码解析
2021/06/08 Python