使用el-upload组件遇到的坑。

1.第一种感觉最好,首先多个文件是一个http请求,另外还可以传除文件外其他的参数,但是没有进度条了。

发送请求的部分没有注释的部分是我分装了调后台的api,注释的部分是直接调。

注意如果使用自定义提交http-request,则on-success和on-error这两个钩子函数会不起作用,另外点击事件submitUpload中的this.$refs.uploadFiles.submit();是必须的,个人感觉是先将所有的文件给el-form处理,

我发先执行this.$refs.uploadFiles.submit();会多次执行handleUpload函数,次数与要上传文件的个数一样。

fileList: [], files: []要在data中先定义好,file是在form默认有的,是选进来的一个文件。action此时是无用的,但是必须要设置。

<template>
<el-form>
<div class="drop-upload-container">
<el-form-item :label-width="formLabelWidth">
<el-upload
multiple
drag
ref="uploadFiles"
:action="action"
:limit="limit"
:auto-upload="autoUpload"
:accept="accept"
:before-upload="beforeUploadFile"
:on-remove="handleRemove"
:on-change="fileChange"
:on-exceed="exceedFile"
:http-request="handleUpload"
:file-list="fileList"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
{{ $t('upload.uploadText') }}
<em>{{ $t('upload.clickUpload') }}</em>
</div>
<div class="el-upload__tip" slot="tip">{{ $t('upload.uploadFileType') }}</div>
</el-upload>
</el-form-item>
<el-form-item class="item-container">
<el-button
size="small"
type="primary"
@click.native="submitUpload"
>{{ $t('buttonTitle.okTitle') }}</el-button>
<el-button size="small" @click.native="uploadCancle">{{ $t('buttonTitle.cancleTitle') }}</el-button>
</el-form-item>
</div>
</el-form>
</template> <script>
import { stringFormat } from "@/utils/stringutils";
import axios from "axios";
import { uploadFilesReq } from "@/api/upload"; export default {
name: "Upload",
props: {
action: {
required: true,
type: String
},
limit: {
required: true,
type: Number
},
autoUpload: {
type: Boolean,
default: false
},
accept: {
required: true,
type: String
}
},
data() {
return {
formLabelWidth: "80px",
userIds: sessionStorage.getItem("userid"),
fileList: [],
files: []
};
},
methods: {
// 文件超出个数限制时的钩子
exceedFile(files, fileList) {
console.log("===exceed===");
let limit_num = `${this.limit}`;
let total_num = `${files.length + fileList.length}`; this.$notify.warning({
title: this.$i18n.t("dialogTitle.dialogWarningTitle"),
//message: `只能选择 ${this.limit} 个文件,当前共选择了 ${files.length + fileList.length} 个`
message: stringFormat(
this.$i18n.t("uploadDialogMsg.uploadFilesLimit"),
[`${this.limit}`, `${files.length + fileList.length}`]
)
});
},
// 文件状态改变时的钩子
fileChange(file, fileList) {
console.log("===change===");
},
// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传
beforeUploadFile(file) {
console.log("before upload");
console.log(file);
let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
const isAcceptFiles =
extension === "xlsx" ||
extension === "vue" ||
extension === "png" ||
extension === "PNG";
if (!isAcceptFiles) {
this.$notify.warning({
title: this.$i18n.t("dialogTitle.dialogWarningTitle"),
message: this.$i18n.t("uploadDialogMsg.uploadFilesType")
});
} let size = file.size / 1024 / 1024;
const isAcceptSize = size < 10;
if (!isAcceptSize) {
this.$notify.warning({
title: this.$i18n.t("dialogTitle.dialogWarningTitle"),
message: this.$i18n.t("uploadDialogMsg.uploadFilesSize")
});
}
return isAcceptFiles && isAcceptSize;
},
// 点击x时执行的钩子函数
handleRemove(file, fileList) {
console.log("===remove===");
}, handleUpload(raw) {
this.files.push(raw.file);
},
submitUpload() {
this.$refs.uploadFiles.submit();
let fd = new FormData();
fd.append("userIds", this.userIds);
this.files.forEach(file => {
fd.append("file", file, file.name);
}); let config = {
headers: {
"Content-Type": "multipart/form-data"
}
}; uploadFilesReq(fd, config)
.then(res => {
console.log("===upload rep===");
console.log(res);
if (res.data.status === "success") {
       this.files = [];
       this.$refs.uploadFiles.clearFiles();
       this.$notify.success({
title: this.$i18n.t("dialogTitle.dialogSuccessTitle"),
message: this.$i18n.t("uploadDialogMsg.uploadFilesSuccess")
});
} else {
this.$notify.error({
title: this.$i18n.t("dialogTitle.dialogErrorTitle"),
message: this.$i18n.t("uploadDialogMsg.uploadFilesFailed")
});
}
})
.catch(err => {
console.log("===upload error===");
console.log(err);
this.$notify.error({
title: this.$i18n.t("dialogTitle.dialogErrorTitle"),
message: this.$i18n.t("uploadDialogMsg.uploadFilesFailed")
});
}); // axios
// .post("/uploadFiles/pc/job/uploadFile", fd, config, {
// timeout: 60000 * 3
// })
// .then(res => {
// if (res.data.status === "success") {
// this.$notify.success({
// title: this.$i18n.t("dialogTitle.dialogSuccessTitle"),
// message: this.$i18n.t("uploadDialogMsg.uploadFilesSuccess")
// });
// }else{
// this.$notify.error({
// title: this.$i18n.t("dialogTitle.dialogErrorTitle"),
// message: this.$i18n.t("uploadDialogMsg.uploadFilesFailed")
// });
// }
// })
// .catch(err => {
// this.$notify.error({
// title: this.$i18n.t("dialogTitle.dialogErrorTitle"),
// message: this.$i18n.t("uploadDialogMsg.uploadFilesFailed")
// });
// });
},
uploadCancle() {
console.log("===Cancle===");
this.$refs.uploadFiles.clearFiles();
}
}
};
</script> <style scoped>
.excel-upload-input {
display: none;
z-index: -9999;
}
.drop {
border: 2px dashed #bbb;
width: 600px;
/* height: 160px; */
line-height: 160px;
margin: 0 auto;
font-size: 24px;
border-radius: 5px;
text-align: center;
color: #bbb;
position: relative;
}
.drop-upload-container {
width: 450px;
}
.item-container {
margin: 0 auto;
/* text-align: center; */
padding-left: 80px;
}
</style>

上传文件调用后台api的封装

import Axios from '@/axios'

export function uploadFilesReq(fd, config) {
return Axios.post("/uploadFiles/pc/job/uploadFile", fd, config, {
timeout: 60000 * 3
});
}

上传文件组件的调用

<template>
<div class="app-container">
<upload
:action="action"
:limit="limitNum"
:accept="accept"
:auto-upload="autoUpload"
/>
</div>
</template> <script>
// import Upload from "@/components/Upload"; import Upload from "./upload"; export default {
name: 'UploadFiles',
components: { Upload },
data() {
return {
action: '/uploadFiles/pc/job/uploadFile',
limitNum: 3,
accept: ".xlsx,.vue,.png,PNG",
autoUpload: false
}
},
methods: { }
}
</script>

2.第二中每个文件都会发送一个请求,并且不能加其他的参数,但是有进度条。

action此时有用的,必须要设置,on-success和on-error这两个钩子函数会起作用

<template>
<el-form>
<div class="drop-upload-container">
<el-form-item :label-width="formLabelWidth">
<el-upload
multiple
drag
ref="uploadFiles"
:action="action"
:limit="limit"
:auto-upload="autoUpload"
:accept="accept"
:before-upload="beforeUploadFile"
:on-remove="handleRemove"
:on-change="fileChange"
:on-exceed="exceedFile"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
{{ $t('upload.uploadText') }}
<em>{{ $t('upload.clickUpload') }}</em>
</div>
<div class="el-upload__tip" slot="tip">{{ $t('upload.uploadFileType') }}</div>
</el-upload>
</el-form-item>
<el-form-item class="item-container">
<el-button
size="small"
type="primary"
@click.native="submitUpload"
>{{ $t('buttonTitle.okTitle') }}</el-button>
<el-button size="small" @click.native="uploadCancle">{{ $t('buttonTitle.cancleTitle') }}</el-button>
</el-form-item>
</div>
</el-form>
</template> <script>
import { stringFormat } from "@/utils/stringutils";
import axios from 'axios' export default {
name: "Upload",
props: {
action: {
required: true,
type: String
},
limit: {
required: true,
type: Number
},
autoUpload: {
type: Boolean,
default: false
},
accept: {
required: true,
type: String
}
},
data() {
return {
formLabelWidth: "80px",
userIds: sessionStorage.getItem("userid"),
fileList: [], files: []
};
},
methods: {
// 文件超出个数限制时的钩子
exceedFile(files, fileList) {
let limit_num = `${this.limit}`;
let total_num = `${files.length + fileList.length}`; this.$notify.warning({
title: this.$i18n.t("dialogTitle.dialogWarningTitle"),
message: stringFormat(this.$i18n.t("uploadDialogMsg.uploadFilesLimit"),
[`${this.limit}`, `${files.length + fileList.length}`]
)
});
},
// 文件状态改变时的钩子
fileChange(file, fileList) {
console.log("===change===");
},
// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传
beforeUploadFile(file) {
console.log("before upload");
console.log(file);
let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
const isAcceptFiles =
extension === "xlsx" ||
extension === "vue" ||
extension === "png" ||
extension === "PNG";
if (!isAcceptFiles) {
this.$notify.warning({
title: this.$i18n.t("dialogTitle.dialogWarningTitle"),
message: this.$i18n.t("uploadDialogMsg.uploadFilesType")
});
} let size = file.size / 1024 / 1024;
const isAcceptSize = size < 10;
if (!isAcceptSize) {
this.$notify.warning({
title: this.$i18n.t("dialogTitle.dialogWarningTitle"),
message: this.$i18n.t("uploadDialogMsg.uploadFilesSize")
});
}
return isAcceptFiles && isAcceptSize;
},
// 点击x时执行的钩子函数
handleRemove(file, fileList) {
console.log("===remove===");
},
// 文件上传成功时的钩子
handleSuccess() {
this.$notify.success({
title: this.$i18n.t("dialogTitle.dialogSuccessTitle"),
message: this.$i18n.t("uploadDialogMsg.uploadFilesSuccess")
});
},
// 文件上传失败时的钩子
handleError(err, file, fileList) {
this.$notify.error({
title: this.$i18n.t("dialogTitle.dialogErrorTitle"),
message: this.$i18n.t("uploadDialogMsg.uploadFilesFailed")
});
},
handleUpload(raw) {
this.files.push(raw.file);
},
submitUpload() {
console.log(this.form.userIds);
this.$refs.uploadFiles.submit();
},
uploadCancle() {
console.log("=========uploadFile=========");
this.$refs.uploadFiles.clearFiles();
}
}
};
</script> <style scoped>
.excel-upload-input {
display: none;
z-index: -9999;
}
.drop {
border: 2px dashed #bbb;
width: 600px;
/* height: 160px; */
line-height: 160px;
margin: 0 auto;
font-size: 24px;
border-radius: 5px;
text-align: center;
color: #bbb;
position: relative;
}
.drop-upload-container {
width: 450px;
}
.item-container {
margin: 0 auto;
/* text-align: center; */
padding-left: 80px;
}
</style>

el-upload用form的方式多文件上传的方法的更多相关文章

  1. WordPress Contact Form 7插件任意文件上传漏洞

    漏洞名称: WordPress Contact Form 7插件任意文件上传漏洞 CNNVD编号: CNNVD-201311-415 发布时间: 2013-11-28 更新时间: 2013-11-28 ...

  2. IIS7.5修改asp的文件上传限制方法

    第一.IIS7.5修改asp的文件上传限制方法 1.打开IIS 2.打开面板中的应用程序开发 asp 3.找到最后的限制属性 4.修改其中的最大请求实体主体限制的值:默认为200000字节,等于195 ...

  3. ANDROID使用MULTIPARTENTITYBUILDER实现类似FORM表单提交方式的文件上传

    最近在做 Android 端文件上传,要求采用 form 表单的方式提交,项目使用的 afinal 框架有文件上传功能,但是始终无法与php写的服务端对接上,无法上传成功.读源码发现:afinal 使 ...

  4. 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传

    Anthem.NET刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现.本文将简要介绍一下该功能的使用方法. Anthem.NET的下载与安装 Anthem.NET可 ...

  5. form+iframe实现ajax文件上传

    在做文件上传时除了传入文件外,还有附件参数,并且要求不刷新页面,之前是表单提交的方式,现在修改成ajax上传的方式,由于没有选择用插件,所以用form+iframe的方式,并且这种方式对IE8以上及主 ...

  6. SpringMVC注解方式与文件上传

    目录: springmvc的注解方式 文件上传(上传图片,并显示) 一.注解 在类前面加上@Controller 表示该类是一个控制器在方法handleRequest 前面加上 @RequestMap ...

  7. php+form表单的文件上传

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. WebApi实现Ajax模拟Multipart/form-data方式多文件上传

    前端页面代码: <input type="file" class="file_control" /><br /> <input t ...

  9. form表单多文件上传

    1.html/jsp主页 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

随机推荐

  1. ☆☆如何学习MATLAB☆☆

    大多数朋友第一次接触MATLAB一般都是在大学里面开设的MATLAB课程,第一次真正使用MATLAB是在自己的毕业论文中用到.所以对于MATLAB可以说是既爱又恨.爱,是因为使用MATLAB几乎可以实 ...

  2. [Python]Python入门笔记:语法基础

    Python笔记 一.基本语法 1.1 注释 文档注释: """contents""" 多行注释: ''' contents ''' 单行注 ...

  3. 手把手教你vmware导入centos7虚拟机

    安装vmware 安装vmware15:https://www.cnblogs.com/uncleyong/p/10740005.html 可能遇到的问题:VMware提示此主机支持Intel VT- ...

  4. navicat:[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and ...

    mysql5.7,xshell下执行sql不会报下面的错,但是navicat会报错,可能是navicat版本问题,换其他客户端不会出现问题. [Err] 1055 - Expression #1 of ...

  5. 公司正在开发BI系统?这些设计要素请了解一下!

    ​1. 数据源 第一个要素数据源.企业中的BI工具可能承接上游数据中台或者其他产品输出的结果,作为输入的数据源,每个业务方用的数据库都可能是不一样的,所以可接入数据源的种类决定的一个BI工具的可用性, ...

  6. 做PPT必备的大数据分析网站,好看又免费的报表工具

    小明以前是学技术,跳槽来到一家大公司,在这个公司里会经常开会,比如有月度报告.季度报告以及年度报告,在开会前小明了解到同事们都会制作精美的PPT来汇报工作计划和目标,看到同事们精美的PPT里各种好看的 ...

  7. .Net Core之JWT授权

    一.什么是JWT 文章参考:https://www.leo96.com/article/detail/55 JSON Web令牌(JWT)是一个开放标准(RFC 7519),它定义 了一种紧凑且自包含 ...

  8. C++的两种实例化方式

    C++中,类有两种实例化方式.一种是有new关键字,一种没有new关键字.那么,这两种实例化方式有什么区别呢? A a;//(1) a存在于栈上 A* a = new A();//(2) a存在于堆中 ...

  9. _IO_2_1_stdin_ 任意写及对 _IO_2_1_stdout_ 任意读的补充

    之前写过一篇 IO_FILE--leak 任意读,但是在学习的时候偷懒了,没有深入去看,这次碰到 winmt 师傅出的题,就傻眼了,故再写一篇博客来记录一下. 例题 ctfshow Incomplet ...

  10. 什么是NFT?

    我有一个年轻朋友,最近买了一个数字艺术品,9百多入手,几周后卖掉,赚了7万多,他告诉我这个东西叫NFT. 2021年twitter创始人杰克.多西将自己发布的第一条twitter通过NFT以250万美 ...