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

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

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

上传图片

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>

2. 在后端使用 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>

2. 在后端返回上传成功后的图片链接，将其返回给前端。在前端上传成功的回调函数 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。如果你的项目中使用的是其他的存储路径，需要修改对应的链接即可。另外，图片回显的时候，为了避免缓存，可以在图片链接后面加上随机数或时间戳。