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，这样就可以在页面上显示图片了。

相关问题

使用iview + Vue从0到1实现前端读取excel表格并渲染到界面

在Vue.js中使用iView框架和vue-excel-import插件可以方便地实现前端读取Excel文件的功能，并将其数据渲染到页面上。以下是简单的步骤：

1. **安装依赖**:
- 首先需要安装`vue-excel-import`库，它是一个轻量级的Excel导入组件。你可以通过npm或yarn进行安装：

     npm install vue-excel-import iview axios
     # 或者
     yarn add vue-excel-import iview axios

2. **引入所需模块**:
在`main.js`或单文件组件的顶部，引入所需的组件和样式：

   import { ElButton } from 'iview';
   import ExcelReader from 'vue-excel-import';
   import 'iview/dist/styles/iview.css';
   import 'vue-excel-import/dist/vue-excel-import.css';

3. **配置Vue应用**:
在Vue实例的`mounted`生命周期钩子里，初始化Excel Reader组件并指定上传文件的方法：

   <template>
     <div>
       <el-button @click="handleFileUpload">选择Excel文件</el-button>
       <ExcelReader ref="excelReader" :on-success="handleSuccess" :on-error="handleError"></ExcelReader>
     </div>
   </template>

   <script>
   export default {
     components: {
       ExcelReader,
     },
     methods: {
       handleFileUpload() {
         this.$refs.excelReader.open();
       },
       // 接收解析后的数据
       handleSubmit(file) {
         this.$refs.excelReader.submit(file);
       },
       // 成功回调处理数据
       handleSuccess(data) {
         const parsedData = data.records; // 解析的数据数组
         this.renderToTable(parsedData); // 将数据渲染到表格或其他UI元素
       },
       // 错误回调处理错误信息
       handleError(error) {
         console.error('Error:', error);
       },
       renderToTable(data) {
         // 根据数据结构创建表格或使用iview的table组件
         // 示例：
         this.tableData = data.map(row => ({
           ...row,
         }));
       },
     },
   };
   </script>

4. **渲染数据**:
`handleSuccess`函数接收的是一个包含所有行的对象数组，你需要将这个数组转换为你希望展示的格式，然后在`renderToTable`方法中，将数据赋值给Vue组件的data属性，比如`<el-table>`。

5. **显示结果**:
现在你应该能看到一个表单按钮，点击后可以选择Excel文件。文件成功导入后，数据会被渲染到已设定好的`<el-table>`或者其他UI元素中。

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`的值为上传图片的预览链接即可。