AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-26 21:05:07

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序图片选择、上传到服务器、预览(PHP)
相关的资讯,希望对您有帮助。

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

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

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

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

小程序前端代码:

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

小程序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 ThinkUpload();// 实例化上传类
  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. }

26阅读 | 0评论
你的回应
写文章

8067