H_Franky 2021-01-13 14:44 采纳率: 22.7%
浏览 138

thinkphp6+vue如何实现图片上传和回显?

前后端分离,axios方式请求,JSON格式交互。vue这边需要传什么图片信息给thinkphp6这边?thinkphp6这边拿到图片信息后如何处理,才能存入mysql同时能回显,下次也能正常取出图片?如果是本地开发,图片是存在本地某个文件夹吗?如果项目部署到阿里云呢?就像头像,图片评论这些。求教,谢谢!

  • 写回答

1条回答 默认 最新

  • Design JBY 2023-05-01 18:45
    关注

    实现图片上传和回显的步骤如下:

    上传图片

    1. 在 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>
    
    1. 在后端使用 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()]);
        }
    }
    

    回显图片

    1. 在 Vue 中使用 el-image 组件来显示图片,该组件需要定义 :src 属性为图片链接。示例如下:
    <template>
      <el-image :src="imgUrl"></el-image>
    </template>
    
    1. 在后端返回上传成功后的图片链接,将其返回给前端。在前端上传成功的回调函数 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。如果你的项目中使用的是其他的存储路径,需要修改对应的链接即可。另外,图片回显的时候,为了避免缓存,可以在图片链接后面加上随机数或时间戳。

    评论

报告相同问题?

悬赏问题

  • ¥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相交分析无法绘制一个或多个图形