前后端分离,axios方式请求,JSON格式交互。vue这边需要传什么图片信息给thinkphp6这边?thinkphp6这边拿到图片信息后如何处理,才能存入mysql同时能回显,下次也能正常取出图片?如果是本地开发,图片是存在本地某个文件夹吗?如果项目部署到阿里云呢?就像头像,图片评论这些。求教,谢谢!
1条回答 默认 最新
- Design JBY 2023-05-01 18:45关注
实现图片上传和回显的步骤如下:
上传图片
- 在 Vue 中使用
el-upload
组件来实现图片上传的 UI,该组件需要定义action
属性为图片上传的 API 地址,name
属性为上传文件的名称,:on-success
属性为上传成功后的回调函数。示例如下:
<template> <el-upload action="/api/upload" name="image" :on-success="handleSuccess"> <!-- 图片上传的触发按钮 --> <el-button>点击上传</el-button> </el-upload> </template>
- 在后端使用
thinkphp6
框架来实现图片上传的 API 接口。具体实现方法可以参考thinkphp6
官方文档中的 文件上传 一节。代码示例如下:
public function upload(Request $request) { // 获取上传的文件 $file = $request->file('image'); // 将文件移动到指定目录 $savePath = 'public' . DIRECTORY_SEPARATOR . 'uploads'; $info = $file->validate(['size'=>1024*1024*2, 'ext'=>'jpg,png,gif'])->rule('uniqid')->move($savePath); // 判断上传是否成功 if ($info) { return json(['code'=>0, 'msg'=>'上传成功', 'filepath'=>$info->getSaveName()]); } else { return json(['code'=>1, 'msg'=>$file->getError()]); } }
回显图片
- 在 Vue 中使用
el-image
组件来显示图片,该组件需要定义:src
属性为图片链接。示例如下:
<template> <el-image :src="imgUrl"></el-image> </template>
- 在后端返回上传成功后的图片链接,将其返回给前端。在前端上传成功的回调函数
handleSuccess
中,将返回的图片链接保存到data
中,供el-image
组件展示。代码示例如下:
<script> export default { data() { return { imgUrl: '' // 保存图片链接 } }, methods: { handleSuccess(res) { if (res.code === 0) { this.imgUrl = '/storage' + res.filepath; // 返回的图片链接前面加上 /storage } else { this.$message.error(res.msg); } } } } </script>
请注意,这里返回的图片链接前面需要加上
/storage
,因为在thinkphp6
中相关文件的默认存储路径是public/storage
。如果你的项目中使用的是其他的存储路径,需要修改对应的链接即可。另外,图片回显的时候,为了避免缓存,可以在图片链接后面加上随机数或时间戳。解决 无用评论 打赏 举报 - 在 Vue 中使用
悬赏问题
- ¥15 本题的答案是不是有问题
- ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
- ¥15 C++使用Gunplot
- ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
- ¥15 matlab数字图像处理频率域滤波
- ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
- ¥15 ELGamal和paillier计算效率谁快?
- ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
- ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
- ¥15 Arcgis相交分析无法绘制一个或多个图形