elementplus中输入框实现输入文字和图片

ElementPlus是基于Vue.js的UI组件库，它对Element UI进行了现代化的升级和改造。要在ElementPlus中创建一个可以输入文字和上传图片的输入框，你可以使用`el-input`组件结合`el-upload`组件。下面是一个简单的例子：

首先，在HTML部分，你可以这样做：

<template>
  <div>
    <el-input v-model="inputValue" placeholder="请输入文字"></el-input>
    <br />
    <el-upload
      action="your-api-url-to-upload-image"
      :on-success="handleImageUploadSuccess"
      :auto-upload="false"
    >
      <el-button slot="trigger">点击选择图片</el-button>
      <el-progress slot="preview" class="el-upload__progress" :percentage="uploadProgress"></el-progress>
    </el-upload>
  </div>
</template>

然后，在你的Vue组件里绑定数据和处理事件：

<script setup>
import { ElInput, ElButton, ElUpload } from 'element-plus'
import axios from 'axios'

const inputValue = ref('');
let uploadProgress = ref(0);

function handleImageUploadSuccess(response) {
  // 这里处理图片上传成功后的操作，比如更新input值或显示图片URL
  // response通常包含了服务器返回的数据，例如新生成的图片URL
  // 记得将图片URL赋值给inputValue或者其他合适的地方
  console.log('图片上传成功', response);
}

function handleFileUpload(e) {
  const file = e.file;
  // 发送POST请求上传图片
  axios.post('your-api-url-to-upload-image', { file }).then((res) => {
    uploadProgress.value = 100; // 更新进度到100%
    handleImageUploadSuccess(res.data);
  });
}
</script>