###
ThinkPHP 实现
图片上传功能
在
ThinkPHP 框架中实现
图片上传功能是一个常见的需求，通常可以通过结合前端框架（如 LayUI 或微信小程序）来完成更复杂的交互逻辑。以下是基于
ThinkPHP 的
图片上传功能的具体实现方法。
#### 后端代码示例
以下是一个完整的后端处理
图片上传的功能代码：
```
php
namespace app\index\controller;
use think\Controller;
use think\Request;
class Upload extends Controller
{
public function image(Request $request)
{
// 获取表单上传文件
$file = $request->file('image');
if ($file) {
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->validate([
'size' => 1024 * 1024 * 2, // 文件大小限制不超过2M
'ext' => 'jpg,png,gif,jpeg', // 只允许上传指定类型的文件
])->move(ROOT_PATH . 'public' . DS . 'uploads');
if ($info) {
// 成功上传后获取上传信息
return
json(['code' => 200, 'msg' => '上传成功', 'data' => ['url' => '/uploads/' . str_replace('\\', '/', $info->getSaveName())]]);
} else {
// 上传失败返回错误信息
return
json(['code' => 400, 'msg' => $file->getError()]);
}
}
return
json(['code' => 400, 'msg' => '未接收到文件']);
}
}
```
上述代码实现了基本的
图片上传功能，并对文件大小
和扩展名进行了验证[^1]。
---
#### 前端代码示例（LayUI）
如果使用 LayUI 进行
图片上传，则可以按照如下方式编写前端页面：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
图片上传</title>
<link rel="stylesheet" href="/layui/
css/layui.
css">
</head>
<body>
<form class="layui-form" action="">
<div class="layui-upload-drag" id="test-upload">
<i class="layui-icon"></i>
<p>点击或将
图片拖拽到这里上传</p>
</div>
</form>
<script src="/layui/layui.
js"></script>
<script>
layui.use('upload', function(){
var upload = layui.upload;
// 执行实例
var uploadInst = upload.render({
elem: '#test-upload' // 绑定元素
,url: '/index/upload/image' // 接收数据的服务端地址
,accept: 'images' // 允许上传的文件类型
,done: function(res){
// 如果上传成功
if (res.code === 200) {
layer.msg('上传成功');
} else {
layer.msg('上传失败：'+ res.msg);
}
}
,error: function(){
// 请求异常回调
layer.msg('请求异常');
}
});
});
</script>
</body>
</html>
```
此代码展示了如何通过 LayUI 插件
调用后端接口完成
图片上传功能。
---
#### 高级功能：多图上传与裁剪
对于需要支持多图上传以及裁剪的情况，可以参考 `Cropper` 库配合
ThinkPHP 使用的方式。具体实现流程包括以下几个方面：
1. **前端配置 Cropper 工具**：用于提供用户界面进行
图片裁剪。
2. **后端接收裁剪后的
图片**：保存至服务器并返回
路径给前端显示。
以下是一个简单的多图上传与裁剪的例子[^2]：
##### 前端部分
```javascript
// 初始化 cropper
和上传组件
var images = [];
$('#crop-image').on('change', function(e) {
var file = e.target.files[0];
$('#img-preview').attr('src', URL.createObjectURL(file));
});
$('.btn-crop').click(function() {
var canvasData = cropper.getCroppedCanvas().toDataURL();
$.ajax({
url: '/index/upload/multi',
type: 'POST',
data: { img_data: canvasData },
success: function(response) {
console.log(response);
}
});
});
```
##### 后端部分
```
php
public function multi()
{
$base64ImageContent = input('post.img_data'); // 获取 base64 编码的数据
list($type, $content) = explode(';', substr($base64ImageContent, strpos($base64ImageContent, ',') + 1), 2);
$filePath = ROOT_PATH . 'public' . DS . 'uploads' . DS . uniqid() . '.png';
file_put_contents($filePath, base64_decode($content));
return
json(['status' => true, 'path' => '/uploads/' . basename($filePath)]);
}
```
---
#### 微信小程序中的
图片上传
针对微信小程序开发场景下的
图片上传，可以利用其内置 API 结合
ThinkPHP 来完成。以下是一段典型的代码片段[^3]：
##### 小程序端
```javascript
wx.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
const tempFilePaths = res.tempFilePaths;
wx.uploadFile({
url: 'https://example.com/index/upload/wxapp', // 替换为实际接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: {},
success(uploadRes) {
let result =
JSON.parse(uploadRes.data);
console.log(result);
}
})
}
})
```
##### 后端控制器
```
php
public function wxapp(Request $request)
{
$file = $request->file('file');
if ($file) {
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/wechat');
if ($info) {
return
json(['success' => true, 'url' => '/uploads/wechat/' . str_replace('\\', '/', $info->getSaveName())]);
}
}
return
json(['success' => false, 'message' => '上传失败']);
}
```
---
### 总结
以上分别介绍了
ThinkPHP 中基础的
图片上传、高级功能（多图上传与裁剪）、以及微信小程序环境下的
图片上传解决方案。每种方案都提供了详细的代码示例供开发者参考。
本文解决在ThinkPHP框架中使用__ROOT__与__PUBLIC__路径引用静态资源如CSS、JS和图片时遇到的问题。作者在服务器根目录放置多个网站，错误地理解__ROOT__路径，导致静态资源无法加载。文章详细解释了__ROOT__的真实含义，并提供了正确的路径引用方法。
扫一扫
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
