element-ui配合node实现自定义上传文件方式
作者：机智的赵先生
element-ui配合node实现自定义上传文件
某些情况下，使用element-ui的upload组件默认上传无法满足我们的需求，so～今天主要介绍如何使用element-ui实现自定义上传，以及后端如何接收上传的文件信息和其他信息，根据element-ui文档，http-request可以自定义上传方法，会覆盖掉默认的上传。
首先我们来看前端代码：
<template> <div style="margin-top:100px"> <el-form :model="form"> <el-form-item label="姓名" label-width="50px"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" label-width="50px"> <el-input v-model="form.age"></el-input> </el-form-item> <el-form-item label="文件" label-width="50px"> <el-upload class="upload-demo" :auto-upload="false" :limit="1" ref="upload" :http-request="upload" multiple> <!-- :http-request="upload" --> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传pdf文件</div> </el-upload> </el-form-item> </el-form> <el-button type="primary" @click="upload">确定</el-button> </div> </template>
<script>
export default{
name: 'upload',
data() {
return {
form: {
name: '',
age: ''
}
}
},
methods: {
upload() {
const formData = new FormData();
const file = this.$refs.upload.uploadFiles[0];
const headerConfig = { headers: { 'Content-Type': 'multipart/form-data' } };
if (!file) { // 若未选择文件
alert('请选择文件');
return;
}
formData.append('file', file.raw);
formData.append('name', this.name);
formData.append('age', this.age);
this.$http.post('/api/upload', formData, headerConfig).then(res => {
console.log(res);
})
}
}
}
</script>由于是上传文件，所以我们需要配置下axios请求header的Content-Type为'multipart/form-data'，this.$refs.upload.uploadFiles[0].raw即为我们选择的文件，name和age则为其他要传的信息。
接着，我们来看后端如何获取，这里以node为例：
我们需要安装multer中间件，npm install multer -S即可，接下来我们来看如何使用multer。
首先引入multer：
var express = require('express');
var multer = require('multer')
const upload = multer({ dest: 'uploads/' });
var app = express();
app.use(upload.single('file')); //
app.post('/api/upload', (req, res)=>{
console.log(req.body);//获取到的age和name
console.log(req.file);//获取到的文件
//做些其他事情
})整个过程下来，就完成了图片的上传，非常简单。
关于multer的用法：https://www.npmjs.com/package/multer
自定义elementui上传文件及携带参数
elementui提供了上传文件的ui，可以比较方便，我们需要它来完成自定义上传文件以及携带参数需要改写其中的一些方法来实现。
下面是一个简单的上传标签
<el-upload ref="upload" style="display: inline" drag action="" :before-upload="beforeUploadHandle" :http-request="handleUploadForm" :auto-upload="false" multiple :limit="1" :on-exceed="handleExceed"> <el-link icon="el-icon-paperclip" type="primary">添加需要上传的文件</el-link> </el-upload>
不自动上传
:auto-upload=“false”
限制上传文件个数
:limit=“1”
上传之前的校验
我们需要实现这个方法，来检测上传的合法性
:before-upload=“beforeUploadHandle”
上传时需要携带参数
需要上传的数据文件以及参数在这里来处理添加
:http-request=“handleUploadForm”
检测添加文件是否超过限制
:on-exceed=“handleExceed”
手动上传
其中的upload对应于上面的ref=“upload”，我们只需要给按钮实现一个方法执行此语句便可以实现自己点击上传
this.$refs.upload.submit();
具体实现
上传限制以及上传之前的校验不赘述，这里给出一个简单的demo。上传限制实现类似，只是给出一些提示信息，file便是我们上传的文件。
beforeUploadHandle(file) {
if (
file.type !== "image/png" &&
file.type !== "image/jpeg"
) {
this.$message.error("只支持.jpg、.jpeg、.jpe、.png文件！");
return false;
}
},
携带参数
handleUploadForm(param) {
console.log(this.pid)
let thisInfo = this
let formData = new FormData()
// 在formData中加入我们需要的参数
formData.append('file', param.file)
formData.append('id', this.pid)
// 向后端发送数据
thisInfo.$axios.post('api/user/update_Info/', formData).then((res) => {
if (res.status === 200) {
thisInfo.$message.success('修改信息成功')
} else {
thisInfo.$message.success('修改信息失败')
}
thisInfo.formFileList = []
thisInfo.uploadFormFileList = []
})
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。