用thinkPHP接收element上传的图片,Element-ui实现图片上传和表单提交功能，打开表单弹框，显示上传图片...

要实现用thinkPHP接收element上传的图片，需要在前端使用Element-ui的上传组件，同时在后端用thinkPHP接收上传的图片并进行处理。

首先，在前端的表单弹框中加入上传组件，代码如下：

<template>
  <el-dialog title="上传图片" :visible.sync="dialogVisible">
    <el-upload
      action="your-upload-url"
      :headers="{ 'Authorization': 'Bearer ' + token }"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      :file-list="fileList"
      list-type="picture"
      :data="{ 'type': 'image' }"
    >
      <el-button slot="trigger" size="small" type="primary">选择图片</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      fileList: [],
      token: localStorage.getItem('token')
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response);
      this.fileList = fileList;
      this.$message.success('上传成功');
    },
    handleError(error, file, fileList) {
      console.log(error);
      this.$message.error('上传失败');
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      return isJPG && isLt5M;
    },
    submitForm() {
      // 提交表单
    }
  }
};
</script>

其中，`:action` 属性指定上传的地址，`:headers` 属性设置请求头，`:on-success` 和 `:on-error` 属性分别设置上传成功和失败的回调函数，`:before-upload` 属性设置上传前的校验规则，`:file-list` 属性绑定已上传的图片列表，`:data` 属性设置额外的参数。

接下来，在后端用thinkPHP接收上传的图片并进行处理。首先需要在控制器中创建一个上传图片的方法：

public function uploadImage()
{
    $file = request()->file('file');

    if (!$file) {
        return json(['code' => -1, 'msg' => '请选择上传的文件']);
    }

    $info = $file->validate(['size' => 512000, 'ext' => 'jpg,png'])->move(ROOT_PATH . 'public' . DS . 'uploads');

    if ($info) {
        $url = '/uploads/' . $info->getSaveName();
        return json(['code' => 0, 'msg' => '上传成功', 'url' => $url]);
    } else {
        return json(['code' => -1, 'msg' => '上传失败：' . $file->getError()]);
    }
}

该方法首先获取上传的文件对象，然后进行校验，最后将文件移动到指定的目录，并返回上传成功后的图片地址。

最后，在前端的上传组件中设置上传成功后的回调函数，将上传成功后返回的图片地址保存到表单中：

handleSuccess(response, file, fileList) {
  console.log(response);
  this.fileList = fileList;
  this.$message.success('上传成功');
  // 保存图片地址到表单中
  let imageUrl = response.url;
  this.form.image = imageUrl;
},

这样就可以实现用thinkPHP接收element上传的图片了。