返回
顶部

修改密码

微信小程序图片选择、上传到服务器、预览(PHP)

+1

-1

收藏

+1

-1

点赞0

评论0

作者:Y-J-Le,来自原文地址 小程序实现选择图片、预览图片、上传到开发者服务器上后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用)小程序前端代码: 选择提问图片: 点击选择图片 提交 小程序js…

作者:Y-J-Le,来自原文地址 
小程序实现选择图片、预览图片、上传到开发者服务器上

后台使用的tp3.2 图片上传 
请求时候的header参考时可以去掉(个人后台验证权限使用)

小程序前端代码:

  1. <view class="section">
  2. <form bindsubmit="bindFormSubmit">
  3. <textarea placeholder="请输入问题内容" name="content"/>
  4. <view class="">
  5. 选择提问图片: <label bindtap="checkimg">点击选择图片</label>
  6. </view>
  7. <view class="">
  8. <image wx:for="{{imglist}}" mode="aspectFit" bindtap="ylimg" data-src="{{item}}" style="width:75px;height:75px;" src="{{item}}"></image>
  9. </view>
  10. <button form-type="submit"> 提交 </button>
  11. </form>
  12. </view>

小程序js代码:

  1. data: {
  2. imglist:[]
  3. },
  4. /**
  5. * form提交事件
  6. */
  7. bindFormSubmit:function(e){
  8. self=this
  9. //图片
  10. var imglist = self.data.imglist
  11. //提问内容
  12. var content=e.detail.value.content;
  13. if(content==''){
  14. wx.showToast({
  15. title: '内容不能为空',
  16. icon: 'loading',
  17. duration: 1000,
  18. mask:true
  19. })
  20. }
  21. wx.showLoading({
  22. title: '正在提交...',
  23. mask:true
  24. })
  25. //添加问题
  26. wx.request({
  27. url: 'https://xxxxxxxxxx/index.PHP?g=user&m=center&a=createwt',
  28. data: {
  29. content:content
  30. },
  31. method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  32. header: app.globalData.header, // 设置请求的 header
  33. success: function (res) {
  34. // success
  35. if(typeof(res.data)=='number'){
  36. if (imglist != '') {
  37. //开始插入图片
  38. for(var i=0;i<imglist.length;i++){
  39. //上传至服务器
  40. wx.uploadFile({
  41. url: 'https://xxxxxxxx/index.php?g=user&m=center&a=upload', //仅为示例,非真实的接口地址
  42. filePath: imglist[0],
  43. name: 'files',
  44. formData: {
  45. 'wtid': res.data
  46. },
  47. header: app.globalData.header,
  48. success: function (res) {
  49. if(i>=imglist.length){
  50. self.setData({
  51. imglist:[]
  52. })
  53. wx.hideLoading();
  54. wx.showToast({
  55. title: '提问成功',
  56. icon: 'success',
  57. duration: 2000,
  58. mask: true
  59. })
  60. wx.navigateBack({
  61. delta: 1
  62. })
  63. }
  64. }
  65. })
  66. }
  67. console.log(imglist);
  68. }else{
  69. wx.hideLoading();
  70. wx.showToast({
  71. title: '提问成功',
  72. icon: 'success',
  73. duration: 2000,
  74. mask: true
  75. })
  76. wx.navigateBack({
  77. delta: 1
  78. })
  79. }
  80. }else{
  81. wx.hideLoading();
  82. wx.showToast({
  83. title: res.data,
  84. icon: 'loading',
  85. duration: 1000,
  86. mask: true
  87. })
  88. }
  89. },
  90. fail: function (res) {
  91. self.onLoad();
  92. }
  93. })
  94. },
  95. //点击选择图片
  96. checkimg:function(){
  97. console.log('点击选择图片');
  98. self=this
  99. wx.chooseImage({
  100. count: 9, // 默认9
  101. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  102. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  103. success: function (res) {
  104. // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  105. var tempFilePaths = res.tempFilePaths
  106. self.setData({
  107. imglist:tempFilePaths
  108. })
  109. }
  110. })
  111. },
  112. //点击预览图片
  113. ylimg:function(e){
  114. wx.previewImage({
  115. current: e.target.dataset.src,
  116. urls: this.data.imglist // 需要预览的图片http链接列表
  117. })
  118. }

php后台代码

//图片上传

  1. public function upload(){
  2. if(IS_POST){
  3. $upload = new \Think\Upload();// 实例化上传类
  4. $upload->maxSize = 3145728 ;// 设置附件上传大小
  5. $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
  6. $upload->rootPath = './Uploads/'; // 设置附件上传根目录
  7. $upload->savePath = ''; // 设置附件上传(子)目录
  8. // 上传文件
  9. $info = $upload->upload();
  10. if(!$info) {// 上传错误提示错误信息
  11. $this->error($upload->getError());
  12. }else{// 上传成功 获取上传文件信息
  13. //插入到数据库中
  14. }
  15. }
  16. }

扫一扫在手机打开

评论
已有0条评论
0/150
提交
热门评论
相关推荐
微信小程序开发中常见的设计败笔
  • 开发资料
  • 2022-05-20 18:35
  • 14 0 0
+1
从王者荣耀里我学会的前端新手指引
  • 开发资料
  • 2022-05-20 18:35
  • 46 0 0
+1
微信小程序登录鉴权与获取用户信息
  • 开发资料
  • 2022-05-20 18:35
  • 3 0 0
+1
小程序录音功能实现
  • 开发资料
  • 2022-05-20 18:35
  • 26 0 0
+1
今日要闻
换一批
热点排行