el-upload文件上传的详细流程

前言

elment-ui上传

在前阵子的项目中需要和其他公司进行数据对接，其中实习生同事前来问我关于el-upload上传二进制文件的问题。所以针对我们自己对接的流程对el-upload上传文件到服务器写一个简单的流程介绍记录一下。

查看demo

el-upload提供很多正不同类型的上传组件demo的根据自己的需求先找到满足自己需求的就好了。

我们在产品需求中需要在上传的时候可以预览上传的图片详情，所以这里使用了el-upload的缩略图功能。

在我们将demo展示的代码配置到项目中之后，我们需要去查看一下element-ui为我们提供的组件配置项找到满足我们需求的功能。

 配置项详情

 element-ui官方提供的配置项有很多，根据自己的需求进行配置即可。后面大致介绍一下两种经常碰到的两种文件上传情况。

Attribute

参数	说明	类型	可选值	默认值
action	必选参数，上传的地址	string	—	—
headers	设置上传的请求头部	object	—	—
multiple	是否支持多选文件	boolean	—	—
data	上传时附带的额外参数	object	—	—
name	上传的文件字段名	string	—	file
with-credentials	支持发送 cookie 凭证信息	boolean	—	false
show-file-list	是否显示已上传文件列表	boolean	—	true
drag	是否启用拖拽上传	boolean	—	false
accept	接受上传的文件类型（thumbnail-mode 模式下此参数无效）	string	—	—
on-preview	点击文件列表中已上传的文件时的钩子	function(file)	—	—
on-remove	文件列表移除文件时的钩子	function(file, fileList)	—	—
on-success	文件上传成功时的钩子	function(response, file, fileList)	—	—
on-error	文件上传失败时的钩子	function(err, file, fileList)	—	—
on-progress	文件上传时的钩子	function(event, file, fileList)	—	—
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)	—	—
before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。	function(file)	—	—
before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。	function(file, fileList)	—	—
list-type	文件列表的类型	string	text/picture/picture-card	text
auto-upload	是否在选取文件后立即进行上传	boolean	—	true
file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array	—	[]
http-request	覆盖默认的上传行为，可以自定义上传的实现	function	—	—
disabled	是否禁用	boolean	—	false
limit	最大允许上传个数	number	—	—
on-exceed	文件超出个数限制时的钩子	function(files, fileList)	—	-

Slot

name	说明
trigger	触发文件选择框的内容
tip	提示说明文字

Methods

方法名	说明	参数
clearFiles	清空已上传的文件列表（该方法不支持在 before-upload 中调用）	—
abort	取消上传请求	（ file: fileList 中的 file 对象 ）
submit	手动上传文件列表	—

当谈到文件上传，el-upload组件是Vue.js中常用的文件上传组件之一。它提供了方便易用的界面和功能，使文件上传变得轻而易举。

首先，让我们来看看文件直接上传的方式。

 类型一：文件直接上传

 

//类型一：文件直接上传
<template>
  <el-upload
    action="/api/upload"
    :before-upload="beforeUpload"
    :on-success="uploadSuccess"
    :on-error="uploadError">
    <el-button icon="el-icon-upload">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      // 可以在这里进行文件格式、大小等的判断
      console.log('beforeUpload', file);
    },
    uploadSuccess(response, file) {
      // 上传成功后的处理
      console.log('uploadSuccess', response, file);
    },
    uploadError(error, file) {
      // 上传失败后的处理
      console.log('uploadError', error, file);
    }
  }
}
</script>

在上述代码中，我们利用el-upload组件实现了一个简单的文件上传功能。action属性指定了文件上传的地址，你可以根据实际需求进行修改。在before-upload属性中，可以添加逻辑判断来限制文件的格式、大小等。在on-success和on-error属性中，我们定义了文件上传成功和失败后的回调函数，你可以在这里进行相关的处理操作。

 类型二：获取文件数据进行赋值字段上传

 有时候，我们需要在文件上传的同时，将一些其他字段的值进行提交。下面是一个详细的示例。

//类型二：获取文件数据进行赋值字段上传
<template>
  <el-form :model="form" label-width="80px">
    <el-form-item label="姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="头像">
      <el-upload
        action="/api/upload"
        :before-upload="beforeUpload"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :data="extraData">
        <el-button icon="el-icon-upload">点击上传</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        avatar: ''
      },
      extraData: {}
    }
  },
  methods: {
    beforeUpload(file) {
      console.log('beforeUpload', file);
      // 在上传前，将其他字段的值赋给extraData
      this.extraData = {
        name: this.form.name
      };
    },
    uploadSuccess(response, file) {
      console.log('uploadSuccess', response, file);
      // 上传成功后，更新form中的avatar字段
      this.form.avatar = response.data.url;
    },
    uploadError(error, file) {
      console.log('uploadError', error, file);
    },
    submit() {
      // 在这里可以通过API将form中的数据进行提交，包括name和avatar字段
      console.log('表单数据', this.form);
    }
  }
}
</script>

1. 在上述代码中，我们使用了el-form和el-form-item来创建一个表单。其中，form对象用于保存表单数据，extraData对象用于额外的上传数据。
2. 在before-upload属性中，我们将表单中的name字段赋值给extraData对象，从而实现了文件上传和其他字段上传的同时进行。
3. 在uploadSuccess回调函数中，我们从上传成功的响应中取得文件的URL，并将其赋值给表单中的avatar字段。
4. 最后，在提交表单时，你可以通过API将表单数据进行提交，包括name和avatar字段。