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


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实现UTF8编码转换成gb2312编码
Dec 22 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
聊聊vue 中的v-on参数问题
Jan 29 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
8个PHP程序员常用的功能汇总
2014/12/18 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
做web开发 先学JavaScript
2014/12/12 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
javascript如何创建对象
2016/08/29 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
python函数缺省值与引用学习笔记分享
2013/02/10 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python的常用模块之collections模块详解
2018/12/06 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
会计自荐书
2013/12/02 职场文书
高中美术教学反思
2014/01/19 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Python包argparse模块常用方法
2021/06/04 Python
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python