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


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 相关文章推荐
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
网页图片延时加载的js代码
Apr 22 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
javascript自定义加载loading效果
Sep 15 Javascript
JS实现扫雷项目总结
May 19 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/10/24 PHP
php实现简单的上传进度条
2015/11/17 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
javascript radio 联动效果
2009/03/04 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
javascript实用方法总结
2015/02/06 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
python numpy 按行归一化的实例
2019/01/21 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
django序列化serializers过程解析
2019/12/14 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
Python面向对象封装操作案例详解
2019/12/31 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
关于母亲节的感言
2014/02/04 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python