element-ui中使用upload组件获取上传文件信息
作者：考拉菜鸟
这篇文章主要介绍了element-ui中使用upload组件获取上传文件信息方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
1.使用htttp-request自定义上传
使用element-ui中的上传组件，upload，这个默认发送post请求，
在使用upload组件自动携带的请求方式发送
action->请求的urlon-success->请求发送成功的钩子–方法function(response, file, fileList)默认参数3个auto-upload->是否在选取文件后立即进行上传,默认是true(选取文件即上传)name->上传的文件字段名,默认值file,后台有时候需要发送别的字段名如image就这修改data->上传时附带的额外参数objectdisabled->是否禁用,默认falsehttp-request->覆盖默认的上传行为，可以自定义上传的实现–方法(当请求方式不为post可以自定义方式)
下面是两个例子
1.使用upload默认请求方式post发送提交图片请求
后台要求文件字段image
在文件上传成功后，可以从response的data属性获取图片在服务器上的路径，文件的具体信息在file.raw中
2.使用upload上传文件，发送patch请求数据
需要使用http-request钩子由于覆盖了其默认请求，updateImg中异步请求携带了路径，action中就随便放了个网址，action是必传参数
http-reques钩子有个默认参数,val.file可以获取文件数据信息
2.使用手动上传
需求背景
有个form表单，通过上传组件获取上传文件信息，点击弹窗的确定按钮后，接口统一进行上传;
限制上传zip类型文件，不超过10M，限制选择1个zip包
<!-- 文件上传-->
<el-form :rules="rules" :model="dataForm" ref="dataForm" label-width="150px" @submit.native.prevent>
<el-form-item label="名称：" prop="name">
<el-input type="text" v-model.trim="dataForm.name" clearable></el-input>
</el-form-item>
<el-form-item label="文件：" prop="file" >
<el-upload
class="upload-import"
ref="uploadImport"
action="https://baidu.com/" <!-- 手动上传, action随便给了个地址-->
:on-remove="handleRemove"
:file-list="fileList"
:limit="1" <!-- 限制上传数量-->
:on-change="handleChange"
:auto-upload="false" <!-- 关闭自动上传-->
accept="application/zip,.zip"> <!-- 设置接收的文件类型-->
<!-- el-upload组件,在手动上传时,禁用按钮外, 还需要设置 :disabled="hasFile" 为true禁用该组件,会导致上传列表也被禁用,无法删除,因此使用v-show,文件数量为1时,显示禁用的的按钮, slot不绑定trigger事件 -->
<el-button v-show="!hasFile" slot="trigger" size="small" type="primary" >选取文件</el-button>
<el-button v-show="hasFile" size="small" type="primary" disabled>选取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传zip文件，且不超过10M</div>
</el-upload>
</el-form-item>
</el-form>
<script>
export default {
data(){
return {
dataForm: {
name: '',
file: null
},
rules: {
name: [
{required: true, message: "请输入名称", trigger: "blur"},
{max: 50, message: "最长可输入50个字符", trigger: "blur"},
{validator: isvalidatName, trigger: "blur" },
],
file: [
{required: true, message: "请选择上传文件", trigger: "blur"},
]
},
hasFile: false,
fileList: []
},
methods: {
handleRemove(file, fileList) {
if (!fileList.length) {
this.hasFile = false;
}
this.dataForm.file = null;
},
handleChange(file, fileList) {
if (fileList.length >= 2) {
return;
}
if (fileList.length === 1) {
this.hasFile = true;
}
this.dataForm.file = file;
},
//确定按钮
onSureHandle(){
this.$refs.dataForm.validate(valid => {
if(valid){
let dataPar = this.dataForm;
let fdParams = new FormData();
fdParams.append('name', dataPar.name);
fdParams.append('file', dataPar.file.raw);
axios.post('/interface/importProject', fdParams, {
headers: {'Content-Type': 'multipart/form-data'},//定义内容格式,很重要
timeout: 20000,
}).then(response => {
//...some logic
}).catch(err =>{})
}
})
}
}
}
</script>
```总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。