小程序图片上传的各种坑

看过我博客的都知道我是老白，按照惯例备注一下我的环境：小程序、linux系统、APACHE服务器、TP5。相同环境的参考比较容易看明白。

小程序端的选择图片、图片上传的代码官方文档都有，贴上做个简单说明：

一、小程序的wxml,创建一个button按钮，用来选择图片并且上传    

<view>

  <button bindtap="uploadimg">上传图片</button>

</view>

二、小程序js端代码：

  /**
  * 上传图片
  */
  uploadimg:function(){
    var that = this;
    wx.chooseImage({  //从本地相册选择图片或使用相机拍照
      count: 1, // 选择几张图片，默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

      success:function(res){
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片，
        var tempFilePaths = res.tempFilePaths
         wx.uploadFile({
          url: 'http://www.****.com/index/index/uploadimg',  //tp5的接口
          filePath: tempFilePaths[0],                        //如果只有一张，那就是0
          name: 'file',                                      //这个文件名，在TP端要用来接收文件用数据                            
            
          formData:{                                         //这个就是在上传图片时自己想同时传的参数，可以多个,服务器         端通过$_POST['user']接这个值
            'user': 106 ,    
          },    
          success:function(res){
            //打印
            console.log(res.data)
          }
        })
       
      }
    })
  },

  小程序端这样基本结束，正常上传成功会返回数据

三、PHP端

首先在index模块里建uploadimg方法，并且要引用request 类，不引用行不行我没试，你自己可以试试

 

<?php 

    namespace app\index\controller;

    //加载系统类
    use \think\Controller;
    //加载数据库类
    use \think\Db;
    use \think\Request;
    
    class Index extends Controller{
        public function uploadimg(){

                $user = $_POST["user"];
                dump($user);

                //接收来的数据，图片谁传过来的，就放谁的文件夹里面
                //获取表单上传的文件，这里基本上是没有问题，肯定能接收到上传的文件的
                $file = request()->file("file");
                dump($file);

                //$info表示把接收的文件放在tp的public\uploads\$user目录下，自己可以先建个uploads目录，一定把这个文件夹改成可读可写哦！因为文件夹不可写，不知道看了多少文章百度了多少天：（，只怪基础差，哈哈，后来才明白，所以当你用小程序上传图片不成功，其它都正确的情况下，考虑一下这个情况，$user是变量，所以不同的人上传的图片是在不同的文件夹里面的
                if($info = $file->move('./uploads/'.$user)){
                    //如果上传成功，得到的文件名，文件的图片格式等信息，TP5默认把图片保存的是:日期\文件名.jpg，下面会写一下怎么把日期去掉
                    dump($info->getsaveName());
                    dump($info->getfileName());
                    dump($info->getExtension());
                }else{
                    dump($info->getError());
                }

到这里基本上是已经能够在服务器端看到上传的图片了

TP5默认保存带日期的的文件夹，去掉日期文件夹，需要修改下面的文件

thinkphp\library\think\file.php的buildSaveName方法修改

$savename = date('Ymd') . DS . md5(microtime(true));生成的目录是20200703\*.jpg格式

396，405行改成如下：
      $savename = DS . md5(microtime(true));