el-upload组件 formFile文件上传

el-upload组件是Element UI中的一个上传组件，支持多种上传方式，包括文件上传、图片上传、拖拽上传等。

formFile文件上传是一种通过表单提交文件的方式进行上传。在el-upload组件中，可以通过设置action属性来指定上传文件的URL地址，然后在上传前将文件转换为FormData对象，通过POST方式提交到服务器端。

以下是一个使用el-upload组件进行文件上传的示例代码：

<template>
  <el-upload
    class="upload-demo"
    :action="uploadUrl"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :show-file-list="false">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/api/upload',
      formData: {
        file: null
      }
    }
  },
  methods: {
    handleSuccess(response) {
      console.log(response);
    },
    beforeUpload(file) {
      const formData = new FormData();
      formData.append('file', file);
      this.formData.file = formData;
      return true;
    }
  }
}
</script>

在上面的代码中，我们定义了一个el-upload组件，并设置了以下属性：

- `action`：上传文件的URL地址，这里设置为`/api/upload`。
- `on-success`：上传成功后的回调函数，这里使用`handleSuccess`方法进行处理。
- `before-upload`：上传前的处理函数，这里使用`beforeUpload`方法将文件转换为FormData对象。
- `show-file-list`：是否显示上传文件列表，这里设置为`false`，表示不显示。

在`beforeUpload`方法中，我们首先创建了一个FormData对象，然后将文件添加到FormData中。最后将FormData对象赋值给组件的`formData`属性，以便在上传时使用。注意，这里需要返回`true`，表示继续上传操作。

在`handleSuccess`方法中，我们可以处理上传成功后的响应数据，这里只是将响应数据输出到控制台中。