找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序上传图片,PHP-Laravel框架实现

[复制链接]
查看: 450|回复: 4
最佳答案
0 

8

主题

8

帖子

596

积分

略知一二

积分
596
 楼主| 发表于 2017-8-11 16:25:50 | 显示全部楼层 |阅读模式
流程概述:

利用微信小程序自带的wx.uploadFile方法,将文件post 到服务器API接口,接受内容,保存

文档地址
https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html
8a68fd1294.png

为什么实例里边没有将 content-type 为 multipart/form-data 放进去呢,想不懂
c40a7f78f.png

直接上代码

js 文件
  1. /选择上传图片
  2. bindUploadTap:function(){
  3.   let that = this
  4.   wx.chooseImage({
  5.     count: 1, // 默认9
  6.     sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  7.     sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  8.     success: function (res) {
  9.       // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  10.       var tempFilePaths = res.tempFilePaths
  11.       
  12.       
  13.       that.setData({
  14.         imgsrc: tempFilePaths[0]
  15.       })

  16.       wx.uploadFile({
  17.         header: {
  18.           'content-type': 'multipart/form-data'
  19.         },
  20.         url: 'https://www.com/api/v1/Index/upload_img', //仅为示例,非真实的接口地址
  21.         filePath: tempFilePaths[0],
  22.         name: 'logo',
  23.         formData: {
  24.           'user': 'test'
  25.         },
  26.         success: function (res) {
  27.           var data = res.data
  28.           console.log(res)
  29.           //do something
  30.         }
  31.       })
  32.     }
  33.   })
  34. },
复制代码

wxml
  1. <button size="mini" bindtap="bindUploadTap">
  2. 选择图片
  3. </button>
  4. <image src="{{imgsrc}}"></image>
复制代码


Laravel 控制器代码
  1. /*
  2.      * 上传图片测试
  3.      */
  4.     public function upload_img(Request $request)
  5.     {

  6.         if(!empty($_FILES['logo'])){
  7.             Log::info($_FILES["logo"]["type"]."---".$_FILES["logo"]["name"]."---".$_FILES["logo"]["size"]);

  8.             $uploaddir = 'app/public/uploads/';
  9.             $uploadfile = $uploaddir . basename($_FILES['logo']['name']);
  10.             Log::info($uploadfile);
  11.             if (move_uploaded_file($_FILES['logo']['tmp_name'], storage_path($uploadfile))) {
  12.                 Log::info( "File is valid, and was successfully uploaded.\n");
  13.             } else {
  14.                 Log::info(  "Possible file upload attack!\n");
  15.             }


  16.         }


  17.         $ret['err']     = 0;
  18.         $ret['msg']     = '成功';

  19.         return response()->json($ret, $this->successStatus);

  20.     }
复制代码

效果图
fcce92f73deb.png
12a5a179e9fe3.png

日志
  1. [2017-08-11 02:27:35] local.INFO: image/jpeg---tmp_434479379o6zAJs7WmNGKeKBJtiDmL7hpsGkw546260158a109feb82ba9d97a6b18942.jpg---35955  
  2. [2017-08-11 02:27:35] local.INFO: app/public/uploads/tmp_434479379o6zAJs7WmNGKeKBJtiDmL7hpsGkw546260158a109feb82ba9d97a6b18942.jpg  
  3. [2017-08-11 02:27:35] local.INFO: File is valid, and was successfully uploaded.
复制代码


5185.png
说明上传成功啦。

作者:浪来了2016
链接:http://www.jianshu.com/p/6a9b3c146b0c
回复

使用道具 举报

最佳答案
0 

0

主题

372

帖子

3026

积分

S1

积分
3026
发表于 2017-8-12 09:04:54 | 显示全部楼层
学习一下,谢谢分享
回复 支持 反对

使用道具 举报

最佳答案
0 

5

主题

383

帖子

3858

积分

S1

积分
3858
发表于 2017-8-12 09:25:31 | 显示全部楼层
学习一下,谢谢分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

372

帖子

3026

积分

S1

积分
3026
发表于 2017-8-14 09:27:51 | 显示全部楼层
学习一下,谢谢分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

2

帖子

62

积分

新人求带

积分
62
发表于 2017-10-19 23:56:44 | 显示全部楼层
非常感谢。好资源
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com