我们在做小程序的时候，上传图片功能基本都会用到。如果你是新手小白，如果服务端接口你选择的是thinkphp，那么这篇文章你可以看一下。由于上传图片到服务器这块没用到数据库，所以thinkphp版本选择这块没啥要求，我这里用的是thinkphp6。

前端（小程序端）

小程序中，我们主要用到小程序的两个API:wx.chooseMedia和wx.uploadFile,具体用法小程序开发文档里都有详细说明。下面我给出自己的例子：

wxml代码中，我们给上传图片的元素绑定ChooseImage事件用来选择要上传的图片；

js代码中，我们就要实现上传图片的逻辑，定义一个ChooseImage方法，在该方法中调用wx.chooseMedia和wx.uploadFile，wx.chooseMedia是用来选择图片或者拍照，wx.uploadFile是将图片传给后端保存到服务器。下面是部分参考代码：

ChooseImage(e) {
        var that = this;
        var field = e.currentTarget.dataset.index;
        var imgList = that.data.imgList;
        var tempImg = that.data.tempImg;
        wx.chooseMedia({
            count: 1, //默认9
            mediaType: ['image'], //文件类型
            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
            sourceType: ['camera'], //只能相机拍照  加个album可以从相册选择
            success: (res) => {
                tempImg = res.tempFiles[0].tempFilePath;
                that.setData({
                    [`${field}`]: tempImg,
                    [`${field}` + 'Text']: '上传中...'
                })
                wx.uploadFile({
                    filePath: res.tempFiles[0].tempFilePath,
                    name: 'image',
                    url: apiurl + '/uploadFile',
                    success(e) {
                        if (e.statusCode == 200) {
                            var img_url = JSON.parse(e.data).data;
                            imgList[field] = img_url;
                            that.setData({
                                imgList: imgList,
                                imgLen: that.JSONLength(imgList),
                                // uploadText: '上传完成'
                                [`${field}` + 'Text']: '上传完成'
                            })
                        }
                    },
                    fail(e) {
                        console.log(e);
                        wx.showToast({
                            title: '图片上传失败',
                            success: function () {
                                that.setData({
                                    tempImg: ''
                                })
                            }
                        })
                    }
                })
            }
        });
    },

后端（thinkphp接口）

我们先设置好路由，确保小程序能访问到上传图片的接口

// 图片上传
$router->post('uploadFile', '\catchAdmin\api\controller\KmApi@uploadFile');

在控制器中，定义个uploadFile方法：

首先，设置网页内容类型为UTF-8编码。

header('Content-Type:text/html;charset=utf-8');

通过$_FILES数组获取上传的文件信息，包括临时文件名$tmp_name和原始文件名$img_name。

$tmp_name = $_FILES['image']['tmp_name'];
$img_name = $_FILES['image']['name'];

定义了允许上传的文件类型数组$uptypes，包括了常见的图片类型，可根据实际需要自定义。

//上传文件类型列表
$uptypes = array( 'image/jpg', 
                  'image/jpeg', 
                  'image/png', 
                  'image/pjpeg', 
                  'image/gif', 
                  'image/bmp', 
                  'image/x-png' );

剩下的就是对图片命名、图片格式校验、上传图片的一些逻辑判断，下面是完整代码，仅供参考：

public function uploadFile()
    {
        header('Content-Type:text/html;charset=utf-8');
        $tmp_name = $_FILES['image']['tmp_name'];
        $img_name = $_FILES['image']['name'];
        //上传文件类型列表
        $uptypes = array(
            'image/jpg',
            'image/jpeg',
            'image/png',
            'image/pjpeg',
            'image/gif',
            'image/bmp',
            'image/x-png'
        );
        //初始化变量
        $date = date('Ymdhis');
        //图片目录
        $img_dir = root_path() . 'public/images/' . date('Ymd') . '/';
        if (!is_dir($img_dir)) {
            mkdir($img_dir);
        }
        //上传文件路径
        $domain = Env::get('app.domain');//自行在env中配置
        //如果当前图片不为空
        if (!empty($img_name)) {
            // 判断上传的图片的类型，同时判断是否上传成功
            if (in_array($_FILES['image']["type"], $uptypes)) {
                $uptype = explode(".", $img_name);
                //图片名称
                $newname = $date . rand(10000, 99999) . "." . $uptype[1];
                $uplad_name = $newname;
                //如果上传的文件没有在服务器上存在
                if (!file_exists($img_dir . $uplad_name)) {
                    //把图片文件从临时文件夹中转移到我们指定上传的目录中
                    $file = $img_dir . $uplad_name;
                    move_uploaded_file($tmp_name, $file);
                    chmod($file, 0644);
                    $img_url = $domain . '/images/' . date('Ymd') . '/' . $newname;
                    return CatchResponse::success($img_url, "上传成功");
                }
            } else {
                return CatchResponse::fail('图片格式不正确');
            }
        } else {
            return CatchResponse::fail('请选择图片上传');
        }
    }

上传成功后，会返回图片上传后的url和上传成功提示，这样小程序就拿到了图片的url,可以继续下一步的工作了。

结语

无论是在学习中还是在工作中，每天进步一点点都能让我们更加自信和有成就感，每天都花一些时间回顾自己的行动和取得的结果，不断学习新的知识和技能。以上如有不正确的，欢迎指正，万分感谢。
收藏加关注，追番不迷路。

微信小程序+thinkphp实现图片上传

前端（小程序端）

后端（thinkphp接口）

结语