微信小程序上传图片(前端+PHP后端)
一、wxml文件
1
2
3
4
5
6
7
|
< text >上传图片</ text >
< view >
< button bindtap="uploadimg">点击选择上传图</ button >
</ view >
< image src='{{source}}' style='width:600rpx; height:600rpx' />
|
二、js文件
Page({ /** * 页面的初始数据 */ data: { //初始化为空 source:'' }, /** * 上传图片 */ uploadimg:function(){ var that = this; wx.chooseImage({ //从本地相册选择图片或使用相机拍照 count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success:function(res){ //console.log(res) //前台显示 that.setData({ source: res.tempFilePaths }) // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://www.website.com/home/api/uploadimg', filePath: tempFilePaths[0], name: 'file', success:function(res){ //打印 console.log(res.data) } }) } }) },)}
三、PHP后端代码
// 上传图片 public function uploadimg() { $file = request()->file('file'); if ($file) { $info = $file->move('public/upload/weixin/'); if ($info) { $file = $info->getSaveName(); $res = ['errCode'=>0,'errMsg'=>'图片上传成功','file'=>$file]; return json($res); } } }
运行结果:
console打印结果:
此时表示上传成功!
转自:https://www.cnblogs.com/zxf100/p/8075569.html
微信小程序上传图片(前端+PHP后端)相关推荐
- vue和小程序哪个好学一点_litemall,Spring Boot后端,微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端 注意: 由于第一次加载数据量较大,建议wif ...
- 【项目实战课】微信小程序图像识别模型前后端部署实战
欢迎大家来到我们的项目实战课,本期内容是<微信小程序图像识别模型前后端部署实战>.所谓项目实战课,就是以简单的原理回顾+详细的项目实战的模式,针对具体的某一个主题,进行代码级的实战讲解. ...
- 微信小程序上传图片组件,多选+单选+预览+删除
微信小程序上传图片+预览+删除 组件代码 HTML <view class="uploadImg-wrap"><view class="upload-f ...
- 通过微信小程序看前端
前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真 ...
- 微信小程序上传图片 预览 删除
微信小程序上传图片 预览 删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
- 微信小程序的开发:通过微信小程序看前端
前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真 ...
- 微信小程序上传图片至服务器Springboot接收格式的问题
微信小程序上传图片至服务器Springboot 需求:通过微信小程序上传图片到服务器,保存至服务器. 实现 Wxml <button bindtap="choose"> ...
- 微信小程序--上传图片加水印
微信小程序–上传图片加水印 wxml <canvas class='canvas' canvas-id="firstCanvas"></canvas> cs ...
- 微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
最新文章
- hook修改信息_React系列二十一 Hook(二)高级使用
- tddebug怎么读取asm文件_如何利用 ASM 实现既有方法的增强?
- Java 自动装箱性能
- python两数相加代码_一边学编程,一边学语数外,用python编程全排列10以内两数加法...
- 深入理解WEB请求过程
- 【Mac】Chrome中添加截图扩展插件FireShot方法
- 相机java程序_以编程方式在Android上用相机拍照
- 【Flutter】基础组件【08】BottomNavigationBar
- js怎么实现ftp上传文件到服务器,js ftp上传文件到服务器
- Android ListView优化
- AEAI CRM 客户关系管理系统项目介绍
- 概率论基础-严士健 第二版 习题与补充2.1答案
- 数据管理能力成熟度DCMM-简介
- Download.Accelerator.Plus.v10.0.4.3_Patch-REPT
- 配置WebLogic Tuxedo Connector (转)
- No qualifying bean of type found for dependency: expected at least 1 bean which qualifies as autowir
- hadoop3.0 启动后输入 jps没有进程
- 笔记本系统摄像头打不开/识别不到/(腾讯会议/QQ语音)等第三方无法正常使用摄像头的解决办法
- VueCLI(脚手架)快速使用
- 3166: [Heoi2013]Alo