前言
在前阵子的项目中需要和其他公司进行数据对接,其中实习生同事前来问我关于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>
- 在上述代码中,我们使用了el-form和el-form-item来创建一个表单。其中,form对象用于保存表单数据,extraData对象用于额外的上传数据。
- 在before-upload属性中,我们将表单中的name字段赋值给extraData对象,从而实现了文件上传和其他字段上传的同时进行。
- 在uploadSuccess回调函数中,我们从上传成功的响应中取得文件的URL,并将其赋值给表单中的avatar字段。
- 最后,在提交表单时,你可以通过API将表单数据进行提交,包括name和avatar字段。