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


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 相关文章推荐
比Jquery的document.ready更快的方法
Apr 28 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
js实现点赞效果
Mar 16 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+mysql保存和输出文件
2006/10/09 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
javascript计时器事件使用详解
2014/01/07 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
JS实现的全排列组合算法示例
2017/10/09 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Python中for循环控制语句用法实例
2015/06/02 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
Django中create和save方法的不同
2019/08/13 Python
Django stark组件使用及原理详解
2019/08/22 Python
python利用faker库批量生成测试数据
2020/10/15 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
劳资员岗位职责
2015/02/13 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
Python OpenCV之常用滤波器使用详解
2022/04/07 Python
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python