如何用element-ui和node实现自定义长尾词上传文件功能？

本文共计714个文字，预计阅读时间需要3分钟。

目录 + element-ui 配合 node 实现自定义上传文件 + 自定义 element-ui 上传文件及携带参数 + 下面是一个简单的上传标签实现 + 具体实现 + 携带参数

element-ui 配合 node 实现自定义文件上传功能，适用于携带参数的场景。

目录

• element-ui配合node实现自定义上传文件
• 自定义elementui上传文件及携带参数
• 下面是一个简单的上传标签
• 具体实现
• 携带参数

element-ui配合node实现自定义上传文件

某些情况下，使用element-ui的upload组件默认上传无法满足我们的需求，so～今天主要介绍如何使用element-ui实现自定义上传，以及后端如何接收上传的文件信息和其他信息，根据element-ui文档，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 = [] }) }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。