看过我博客的都知道我是老白,按照惯例备注一下我的环境:小程序、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));