el
emetUi
组件
–
el
-
upload
实现
上传
Exc
el
文件的实例
【需求】实现
上传
Exc
el
文件,在
上传
到服务器时,还要附加一个参数,在请求
上传
文件接口前,先要进行文件格式判断。
【知识点】
1、
el
-
upload
官方文档中,主要用到了以下属性:
可选参数,
上传
时附带的额外参数
可选参数,
上传
的文件字段名
before-
upload
可选参数,
上传
文件之前的钩子,参数为
上传
的文件,若返回 false 或者返回 Promise 且被 reject,则停止
上传
。
2、split进行字符串截取
主要用到before-remove
删除
文件之前的钩子,参数为
上传
的文件和文件列表,若返回 false ,则停止
删除
,不在执行:on-remove="handleRemove"事件。
删除
清空存放文件的数组。
:file-list="form._digitalMediaDtoList"
:before-
upload
="fn_
upload
__before"
:http-request
解决方案:
这是因为使用file-
upload
组件
时自带的提示会盖住
上传
的文件名,修改一下自带的样式即可
::v-deep .
el
-
upload
-list__item.is-success.focusing .
el
-icon-close-tip {
display: none !important;
在该
组件
中会有默认的底层处理功能就是,当你点击图片上的
删除
按钮
时,系统会自动在fil
eL
ist中把该图片删掉,因此在
删除
的回调函数中不需要对fil
eL
ist做额外的处理。
之前写过一篇关于
el
-
upload
单文件自定义
上传
文章:axios+
el
ementui的
upload
使用http-request自定义文件
上传
_Suk_阿硕的博客-CSDN博客_http-request自定义文件
上传
<!-- 关于
组件
的部分属性: action:
上传
的地址,和axios没关系,
el
ementui自己发请求 :show-file-list:是否显示
上传
的文件列表 :on-success:
上传
成功的回调 :on-error:
上传
失败的回调 :before-
upload
:
上传
之前的回调,可.