vue element ui 添加附件

### 回答1：
要在 Vue 中使用 Element UI 添加附件，可以使用 Element UI 中的 Upload 组件。以下是一个示例代码，可以供您参考：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/your-upload-url"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :multiple="false"
      :limit="1"
      :show-file-list="false"
      :auto-upload="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // 上传成功后的处理逻辑
    },
    beforeUpload(file) {
      // 上传文件前的处理逻辑
    },
  },
};
</script>

<style>
.upload-demo {
  border: 1px dashed #409EFF;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
}
</style>

在上面的代码中，我们使用了 Element UI 中的 Upload 组件，并配置了一些属性和方法：

- `action`：指定上传文件的 URL；
- `on-success`：上传成功后的回调函数；
- `before-upload`：上传文件前的回调函数；
- `multiple`：是否允许上传多个文件；
- `limit`：最多允许上传的文件数量；
- `show-file-list`：是否显示文件列表；
- `auto-upload`：是否在选择文件后立即上传。

您可以根据自己的需求，按照以上示例进行配置。

### 回答2：
在Vue中使用Element UI添加附件需要进行以下步骤：
1. 首先，确保项目中引入了Vue和Element UI组件库。

2. 定义一个包含附件上传的表单组件，可以使用Element UI中的Upload组件。在模板中添加一个表单，表单中包含一个Upload组件和一个提交按钮。

<template>
  <div>
    <form>
      <el-upload
        class="upload-demo"
        :action="uploadUrl"
        :on-success="handleSuccess"
        :before-upload="handleBeforeUpload"
        :file-list="fileList"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </form>
  <div>
</template>

3. 在data属性中定义所需的数据，如上传的文件列表：

data() {
  return {
    fileList: [], // 上传的文件列表
    uploadUrl: 'your_upload_url', // 上传文件的接口地址
  };
},

4. 在methods属性中定义相应的事件处理方法，如handleSuccess方法处理上传成功的逻辑：

methods: {
  handleSuccess(response, file, fileList) {
    // 上传成功后的逻辑处理
    console.log(response);
  },
  handleBeforeUpload(file) {
    // 上传之前的处理逻辑，如限制上传文件的类型和大小
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG || !isLt2M) {
      this.$message.error('上传图片只能是 JPG/PNG 格式，且不超过 2MB!');
    }
    return isJPG && isLt2M;
  },
  submitUpload() {
    // 手动触发上传
    this.$refs.upload.submit();
  },
},

以上就是使用Vue和Element UI实现附件上传的基本步骤。根据项目实际需求，可以进行适当的修改和调整。

### 回答3：
在Vue中使用Element UI添加附件可以通过以下步骤完成：

1. 首先，在Vue项目中安装Element UI。可以通过npm或者yarn来安装，命令为：

   npm install element-ui --save
   或者
   yarn add element-ui

2. 在main.js文件中引入Element UI，并配置相关组件：

   import Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'

   Vue.use(ElementUI)

3. 在需要添加附件的组件中，使用Element UI提供的上传组件进行文件上传。例如：

   <template>
     <el-upload
       class="upload-demo"
       action="/upload"
       :on-change="handleUpload"
       :on-preview="handlePreview"
       :on-remove="handleRemove"
       :file-list="fileList">
       <el-button size="small" type="primary">点击上传</el-button>
       <div slot="tip" class="el-upload__tip">上传文件不超过5MB</div>
     </el-upload>
   </template>

   <script>
     export default {
       data() {
         return {
           fileList: []
         }
       },
       methods: {
         handleUpload(file) {
           // 处理文件上传逻辑
         },
         handlePreview(file) {
           // 处理文件预览逻辑
         },
         handleRemove(file) {
           // 处理文件移除逻辑
         }
       }
     }
   </script>

4. 在methods中的handleUpload、handlePreview、handleRemove等方法中编写对应的逻辑，例如将文件上传到服务器、打开文件预览、删除文件等操作。

以上就是使用Vue和Element UI实现在页面中添加附件的方法。可以根据实际需求对上传组件进行更多的配置和样式定制。