使用vue.js+elememtui实现文件上传功能

### 回答1：
要在Vue.js中使用ElementUI实现文件上传功能，可以按照以下步骤进行操作：

1. 安装ElementUI和axios：

npm install element-ui axios

2. 在Vue项目中引入ElementUI和axios：

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

Vue.use(ElementUI)
Vue.prototype.$axios = axios

3. 在组件中添加文件上传组件：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :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>

在`el-upload`组件中，我们指定了上传文件的地址和一些属性，例如`before-upload`和`on-success`。在`before-upload`中，我们可以对上传的文件进行一些校验，例如文件类型和大小；在`on-success`中，我们可以处理上传成功后的回调。

4. 在组件的`data`选项中添加文件列表：

export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 处理上传成功后的回调
    },
    beforeUpload(file) {
      // 对上传的文件进行校验
    }
  }
}

5. 在`beforeUpload`方法中，我们可以通过`return false`来阻止上传，或者通过`return true`来允许上传。在这个方法中，我们还可以使用ElementUI的`Message`组件来提示用户上传文件的限制条件：

beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

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

这样，我们就可以在Vue.js中使用ElementUI实现文件上传功能了。

### 回答2：
Vue.js是一个用于构建用户界面的渐进式JavaScript框架，而Element UI是一套基于Vue.js的桌面端组件库，它提供了丰富的可复用的UI组件，包括上传组件。使用Vue.js和Element UI可以很方便地实现文件上传功能。

首先，需要在项目中安装和引入Vue.js和Element UI。可以通过npm命令安装它们，并在项目代码中引入相关的依赖。

npm install vue
npm install element-ui

然后，在Vue组件中按照以下步骤实现文件上传功能：

1. 引入需要的组件：

import { Upload, Button } from 'element-ui';

2. 在组件的template中使用Upload和Button组件：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :headers="{'Authorization': token}"
      :on-success="handleSuccess">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

3. 在组件的script中定义相关方法和变量：

export default {
  data() {
    return {
      token: 'your_token_here',
      fileList: []
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
      // 处理上传成功的逻辑
    }
  }
};

在以上代码中，我们使用了el-upload组件来实现文件上传的功能。el-upload组件接受多个属性，包括action属性用于指定上传的URL地址，headers属性用于指定请求头信息，file-list属性用于展示当前已上传的文件列表等。

同时，我们还定义了handleSuccess方法来处理上传成功的逻辑。在这个方法中，我们可以通过response参数获取服务器返回的数据，通过file参数获取当前上传的文件对象，通过fileList参数获取当前已上传的文件列表。

这就是使用Vue.js和Element UI实现文件上传功能的步骤。通过引入相应的组件，设置相关的属性和方法，我们可以轻松地实现文件上传功能，并根据需求进行相应的调整和定制。

### 回答3：
要使用Vue.js和ElementUI实现文件上传功能，可以按照以下步骤进行操作：

1. 首先，在Vue.js项目中安装ElementUI和Axios（用于发送文件上传请求）。

   npm install element-ui axios --save

2. 在Vue组件中导入所需的ElementUI组件和Axios。

   import { Upload, Button } from 'element-ui';
   import axios from 'axios';

3. 在Vue组件中使用`<el-upload>`标签创建文件上传组件。

   <template>
     <el-upload
       action="上传文件的URL"
       :on-success="handleSuccess"
       :on-error="handleError"
       :limit="1"
     >
       <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
     </el-upload>
   </template>

4. 在Vue组件的`methods`中定义处理上传成功和上传失败的回调函数。

   methods: {
     handleSuccess(response) {
       // 上传成功的处理逻辑
       console.log(response);
     },
     handleError(error) {
       // 上传失败的处理逻辑
       console.error(error);
     }
   }

5. 在Vue组件中使用Axios发送文件上传请求。

   methods: {
     handleSuccess(response) {
       const formData = new FormData();
       formData.append('file', response.file);
   
       axios.post('上传文件的URL', formData)
         .then(res => {
           // 处理上传成功的返回结果
           console.log(res);
         })
         .catch(err => {
           // 处理上传失败的错误信息
           console.error(err);
         });
     }
   }

以上是使用Vue.js和ElementUI实现文件上传功能的基本步骤。通过自定义`handleSuccess`和`handleError`方法，可以进一步处理上传成功和失败的逻辑，如更新页面数据、显示提示信息等。