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


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实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
Javascript 实用小技巧
Apr 07 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
JS实现盒子拖拽效果
Feb 06 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数组去重复数据示例
2014/02/25 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
写自荐信三大法宝
2014/01/24 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
家长学校实施方案
2014/03/15 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
Vue如何实现组件间通信
2021/05/15 Vue.js
MySQL 数据类型详情
2021/11/11 MySQL