el-upload上传文件(el-upload上传文件必传校验)

el-upload上传文件 el-upload上传文件前言

推荐整理分享el-upload上传文件(el-upload上传文件必传校验)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:el-upload上传文件和参数,el-upload上传文件参数,el-upload上传文件到本地,el-upload上传文件携带参数,el-upload上传文件夹,el-upload上传文件进度条,el-upload上传文件夹,el-upload上传文件必传校验,内容如对您有帮助，希望把文章链接给更多的朋友！

公司和学校项目都用到了上传文件的功能，记录一下。

准备express实现的上传接口const express = require('express');​// 文件上传模块const multiparty = require('multiparty')​// 提供跨域资源请求const cors = require('cors')​// 文件操作const fs = require('fs')​const app = express();​app.use(cors());​app.get('/policy', (req, res) => { res.json({ code: 200, msg: '成功', url: '/upload', filename: 'clz' })});​app.post('/upload', (req, res) => { let form = new multiparty.Form()​ // 配置文件存储路径 form.uploadDir = './upload'​ form.parse(req, (err, fields, files) => { // 解析formData​ for (const file of files.file) { const newPath = form.uploadDir + '/' + file.originalFilename​ // renameSync(oldPath, newPath)：同步重命名文件，oldPath使用默认上传路径，newPath则是想要保存到的路径 fs.renameSync(file.path, newPath); }​ res.json({ code: 200, msg: '上传成功' }) })});​app.listen(8088, () => { console.log('http://localhost:8088/');});

如果需要使用，自行查阅express用法，也可以到本人博客中查看简单教程。

开始简单使用版本<template> <el-upload action="http://localhost:8088/upload" :show-file-list="true" :on-success="handleSuccess" :on-error="handleError" > <el-button type="primary">上传图片</el-button> </el-upload></template>​<script setup>import { ElMessage } from "element-plus";​const handleSuccess = (res, file, files) => { console.log(res); console.log(file, files);​ new ElMessage({ type: "success", message: "上传成功", });};​const handleError = (error, file, files) => { console.log(error); console.log(file, files); ElMessage.error("上传失败");};</script>​<style lang="less" scoped></style>​

解释下上面的属性：

action：请求URL

show-file-list：是否展文件列表(如果没上传成功，则会闪现一下，再消失)

on-success：文件上传成功钩子

参数：res：后端返回的成功响应数据(响应状态为成功时)file：上传的文件files：成功上传的文件列表

on-success：文件上传失败钩子

参数：error：错误对象，内容是后端返回的响应数据(响应状态为失败时，如状态码为500)file：上传的文件files：成功上传的文件列表

接下来，去后端设置的路径去看看有没有成功保存上传的文件。

添加token

这个比较简单，因为element-plus也封装好了，只需要使用headers属性，去设置请求头即可

<el-upload action="http://localhost:8088/upload" :headers="{ token: '12345' }"> <el-button type="primary">上传图片</el-button></el-upload>

上传前获取签名再上传

有时候并不是直接上传就可以的，比如一开始并没有上传路径，需要调用获取签名接口来获取上传路径。这个时候就可以使用我们的上传文件之前的钩子before-upload。在上传前调用获取签名的接口，用拿到的url去修改，上传路径，就能够上传了。

<template> <el-upload :action="url" :before-upload="getPolicy"> <el-button type="primary">上传图片</el-button> </el-upload></template>​<script setup>import axios from "axios";import { reactive, ref } from "vue";​const url = ref("");​const getPolicy = () => { return new Promise((resolve, reject) => { axios .get("http://localhost:8088/policy") .then((res) => { const { data } = res;​ if (data.code === 200) { url.value = `http://localhost:8088${data.url}`;​ resolve(); } }) .catch((error) => { reject(error); }); });};</script>​<style lang="less" scoped></style>

手动上传

我们上面的例子都是选中文件后，就会上传，但是有时候我们会有点击按钮才去上传的需求，这个时候就需要结合auto-upload和submit来实现手动上传了。先设置auto-upload为false，取消自动上传，这个时候选中图片后就没有上传了，所以我们在按钮的点击事件中，还得使用DOM去调用submit方法去手动上传。

<template> <el-upload ref="upload" action="http://localhost:8088/upload" :auto-upload="false" > <el-button type="primary">上传图片</el-button> </el-upload>​ <el-button type="primary" @click="confirm">确定</el-button></template>​<script setup>import { getCurrentInstance } from "vue";​const { proxy } = getCurrentInstance();​const confirm = () => { proxy.$refs.upload.submit();};</script>​<style lang="less" scoped></style>

上传的时候修改文件名

情境：调用签名接口时也给你返回一个文件名，前端在上传的时候需要把文件名改掉再上传，让服务器保存的是规范的文件名。

首先，先说一下结论：无法通过修改File对象的name属性，实现重命名

在上传前钩子中修改File对象的name属性<template> <el-upload action="http://localhost:8088/upload" :before-upload="getPolicy" > <el-button type="primary">上传图片</el-button> </el-upload></template>​<script setup>// 上传前钩子const getPolicy = (file) => { console.log(file);​ file.name = "clz.png"; // 如果在上传前钩子中对文件的name属性进行修改，则会导致上传不了。而且不报错，难以发现问题所在。​ console.log(file.name);};</script>​<style lang="less" scoped></style>

毫无波澜。

上传文件时修改

通过http-request属性，覆盖默认的上传行为。

<template> <el-upload action="";};</script>​<style lang="less" scoped></style>

直接报错

解决方案

既然不能直接修改File对象的name属性来实现重命名操作，那么应该怎么办呢？

这个时候就需要通过new File构造函数去再创建一个文件，创建的同时更改名字。

<template> <el-upload action="");​ console.log(cloneFile);};</script>​<style lang="less" scoped></style>

注意：如果是更改一个文件的文件名的话，File的构造函数第一个参数应该是包住file的数组

但是这个时候，又有问题了，我们已经使用http-request覆盖默认的上传的行为了，所以我们还得重新实现上传。

上传文件首先需要formData对象，然后给formData添加上数据，在把formData通过接口发出去即可。

<template> <el-upload action="#" :http-request="httpRequest"> <el-button type="primary">上传图片</el-button> </el-upload></template>​<script setup>import axios from "axios";import { ElMessage } from "element-plus";​const httpRequest = ({ file }) => { console.log(file);​ const cloneFile = new File([file], "clz.png");​ const formData = new FormData(); formData.append("file", cloneFile);​ axios.post("http://localhost:8088/upload", formData).then((res) => { if (res === 200) { new ElMessage({ type: "success", message: "上传成功", }); } });};</script>​<style lang="less" scoped></style>

小贴士

上面已经说出解决方法了，但是，重命名一般不会帮你把文件后缀都给改掉。所以这个时候可以通过正则表达式把后缀给取出来。

const houzhui = file.name.replace(/.+./, "");const newFile = new File([file], filename+houzhui);一次请求上传多个文件

el-upload默认一个请求上传一个文件。需要上传多个文件首先得添加multiple属性。

上面的例子中，我们可以发现，我们上面选中了两个文件，点击确定，上传图片时调用了两次上传接口。

既然el-upload默认一个请求上传一个文件，那么我们就不要使用el-upload的上传方法就行了。点击确定按钮时，去调用一个上传文件方法。

因为我们点击确定时，需要获取选中的文件，所以需要有file-list属性，保存选中的文件。

<template> <el-upload ref="upload" action="#" multiple :file-list="fileList" :auto-upload="false" > <el-button type="primary">上传图片</el-button> </el-upload>​ <el-button type="primary" @click="confirm">确定</el-button></template>

点击确定按钮，会触发confirm事件，实现一个请求上传多个文件的关键就在这，这个时候创建一个formData对象，遍历选中的文件列表，通过append添加到formData上。最后在调用uploadFile函数，真正把文件上传上去。

const fileList = reactive([]);​const confirm = () => { const formData = new FormData();​ console.log(fileList);​ for (const file of fileList) { formData.append("file", file.raw); }​ uploadFiles(formData);};​function uploadFiles(data) { axios.post("http://localhost:8088/upload", data).then((res) => { if (res === 200) { new ElMessage({ type: "success", message: "上传成功", }); } });}

小技能获取图片的宽高像素// 创建Image对象const img = new Image();​// 设置图片的srcimg.src = 'https://www.clzczh.top/medias/featureimages/19.png';​// 添加load事件，图片加载完成后执行img.onload = () => { // 获取图片的宽高像素 console.log(img.width, img.height);};