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


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 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
原生js+css调节音量滑块
Jan 15 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新手上路(十二)
2006/10/09 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
js给selected添加options的方法
2015/05/06 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
python pickle 和 shelve模块的用法
2013/09/16 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
《太阳》教学反思
2014/02/21 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers