vue点击按钮选择上传图片，并显示到到界面上

你可以使用HTML5的File API来实现这个功能，同时结合Vue框架进行数据的绑定。

首先在你的Vue组件中，需要有一个input标签用于选择上传的文件：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <img :src="imageUrl" alt="">
  </div>
</template>

在data中定义imageUrl用于存储图片的URL，handleFileChange方法用于处理文件选择后的事件：

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      this.imageUrl = URL.createObjectURL(file);
    }
  }
}
</script>

在handleFileChange方法中，首先获取用户选择的文件，然后使用URL.createObjectURL方法生成一个Blob URL，将其赋值给imageUrl，这样就可以在页面上显示图片了。

相关问题

ant design vue2 实现图片上传并拖拽位置

可以通过使用Ant Design Vue的Upload组件和Dragger组件实现图片上传并拖拽位置。具体代码示例如下：

<template>
  <div>
    <a-upload
      :action="uploadUrl"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
    >
      <a-icon type="upload" /> Click to Upload
    </a-upload>
    <a-dragger
      :action="uploadUrl"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
    >
      <p class="ant-upload-drag-icon">
        <a-icon type="inbox" />
      </p>
      <p class="ant-upload-text">Click or drag file to this area to upload</p>
      <p class="ant-upload-hint">Support for a single or bulk upload.</p>
    </a-dragger>
    <img :src="imageUrl" width="200" height="200" style="margin-top: 20px;">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      uploadUrl: 'your-upload-server-url'
    };
  },
  methods: {
    beforeUpload(file) {
      // 在这里可以对文件进行校验，例如大小、类型等
      console.log('before upload', file);
    },
    onSuccess(response, file, fileList) {
      // 上传成功后的回调函数
      console.log('upload success', response, file, fileList);
      this.imageUrl = URL.createObjectURL(file.raw);
    }
  }
};
</script>

在这段代码中，我们使用了`a-upload`组件和`a-dragger`组件来展示图片上传的界面。`a-upload`组件可以通过单击上传按钮或者拖拽到上传区域来完成文件上传；`a-dragger`组件则是将上传区域改为了一个拖拽框，视频等其他多格式的文件也能方便的拖拽上传。同时，我们在`beforeUpload`函数中可以对文件进行校验，并在`onSuccess`函数中处理上传成功后的事件。最后设置`imageUrl`的值为上传图片的预览链接即可。

Element plus实现图片上传以及单选框的vue界面，给出代码

以下是使用 Element Plus 实现图片上传和单选框的 Vue 代码示例：

<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="图片上传">
        <el-upload
          class="upload-demo"
          action="/api/upload"
          :on-success="handleUploadSuccess"
          :before-upload="beforeUpload"
          :limit="1"
          :file-list="fileList"
          list-type="picture-card"
          :auto-upload="false"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="单选框">
        <el-radio-group v-model="form.radio">
          <el-radio :label="1">选项1</el-radio>
          <el-radio :label="2">选项2</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        radio: 1, // 单选框默认值
      },
      fileList: [], // 图片上传列表
    };
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('只能上传 JPG/PNG 格式的图片');
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB');
      }

      return isJPG || isPNG && isLt2M;
    },
    handleUploadSuccess(res, file) {
      this.form.imageUrl = URL.createObjectURL(file.raw);
      this.fileList.push({
        name: file.name,
        url: URL.createObjectURL(file.raw),
      });
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form);
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
  },
};
</script>

需要注意的是，在使用 Element Plus 的 Upload 组件上传图片时，需要设置 `:auto-upload="false"` 属性，防止自动上传，而是在上传按钮点击时再进行上传。另外，需要自定义 `beforeUpload` 方法来限制上传的文件类型和大小，并且在上传成功后将图片缩略图添加到 `fileList` 列表中，以便在界面上显示已上传的图片。