vue elementui 文件上传,vue element 文件上传
这篇文章主要介绍了某视频剪辑软件元素_ui上传文件，并传递额外参数操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
需求：
1、文件大小验证
2、文件类型验证
3、额外参数传输
模板
el-upload class=上传-演示操作：limit= 1 :file-list= form file list :http-request= handleUploadForm :on-exceed= formHandleExceed :on-remove= formHandleRemove
:before-upload= before upload form accept= .csv、应用程序/vnd。开放XML格式-office文档。电子表格ml。表格，应用程序/vnd.ms-excel
埃尔按钮类型="主要"上传文件/el-button
span slot= tip class= El-upload _ _ tip style= margin:0 10px；只能上传xlsx/xls/csv文件，且不超过{{formMaxSize}}M/span
/El-上传
/模板
脚本
导出默认值{
data () {
返回{
formMaxSize: 10，//上传文件大小
表单文件列表：[],//显示上传文件
uploadFormFileList: [] //确定上传文件
}
},
方法：{
//开始上传前验证
beforeUploadForm(文件){
//验证文件大小
如果(文件。尺码/1024/1024这个。表单maxsize){
这个消息({
消息： `消息上传文件大小不能超过${this.formMaxSize}M！`,
类型："警告"
})
返回错误的
}
//中文乱码处理
if (file.raw) {
let reader=new FileReader() //读取文件内容
读者。读取文本(文件。原始， gb2312) //防止中文乱码问题，不加reader.onload方法都不会触发
reader.onload=函数(e) {
这个。内容html=e .目标。结果//文本文本内容，接下来就可以对其进行校验处理了
}
}
//验证文件类型
var testmsg=file。姓名。子串(文件。姓名。lastindexof( . ) 1)
const extension=testmsg=== xlsx testmsg=== xls testmsg=== CSV
如果(!扩展){
这个消息({
消息： 上传文件只能是xlsx/xls/csv格式!,
类型："警告"
})
}
返回扩展
},
//移除上传列表中文件
formHandleRemove (file，formFileList) {
让thiz=这个
对于(设I=0；我觉得。uploadformfilelist。长度；i ) {
if (thiz.uploadFormFileList[i].pname===file.name) {
thiz。uploadformfilelist。拼接(I，1)
破裂
}
}
},
//允许上传文件个数验证
formHandleExceed (files，formFileList) {
这个$消息。警告(` n当前限制选择一个文件，本次选择了${files.length}个文件，共选择了${files.length格式文件列表。长度}个文件`)
},
//上传文件
handleUploadForm (param) {
让thiz=这个
假设表单数据=新表单数据()
formData.append(uid ，上传文件编号) //额外参数
formData.append(files ，param.file)
让负载=thiz .$正在加载({
锁：真的，
文本： 上传中，请稍候.
微调器：“el图标加载",
背景： rgba(0，0，0，0.7)
})
thiz .$ axios。post( http://localhost:8080/upload/file ，formData).然后(({data})={
if (data.statusCode===233) {
thiz .$message(上传文件成功，数据。消息)
thiz.formFileList=[]
thiz.uploadFormFileList=[]
}否则{
thiz.formFileList=[]
thiz.uploadFormFileList=[]
thiz .$message(上传文件失败，数据。消息)
}
loading.close()
})
}
}
}
/脚本
样式lang=scss 范围
/风格
总结：
关于埃尔-上传中各属性的配置，可以看element_ui官网
后端接受上传文件和额外参数：
@ request param(value= uid )String uid，@ request param(value= files )multipart file[]files
补充知识：vue利用elementUI上传文件以及其他参数的处理方式
将文件自动上传改为错误的
：自动上传=假
点击保存的时候，调用埃尔-上传的上传方法
代码如下（封装的上传方法)
导出函数mpp(数据){
返回新承诺（功能（解决，拒绝){
let data={
方法： POST ，
网址：网址，
数据：数据
}
解析(axios(数据));
})
}
模板
！-导入计划-
div class="关联计划"
El-form:model= data model :rules= rules ref= association plan label-width= 100px
El-表单-项目标签=项目名称： prop=projectArry
El-cascader:options= listOrgInfoList v-model=数据模型。 project arry :props= default prop size= small placeholder=请选择项目style= width:100%；clearable:disabled= is company /El-cascader
/El-表单-项目
El-表单-项目标签=计划级别： prop=level
El-select size= small v-model=数据模型。级别“placeholder=”请选择： clearable style= width:100%；
el-option v-for=(item，index)in planTypeList :label= item。 name :value= item。 number :key= index /El-option
/el-select
数据模型。级别==1 一级进度计划匹配项目总工期，项目下只可建立一个，请确认后再添加！/span
/El-表单-项目
El-表单-项目标签=计划名称： prop=name
埃尔-输入v型车。number=数据模型。name size= small /El-input
/El-表单-项目
El-表单-项目标签=导入计划：
埃尔-上传接受=。MPP style= display:inline-block；垂直对齐：顶部；ref= upload add action= :auto-upload= false :http-request= upload img :on-success= upload img success :on-remove= handle remove
El-button size= small type= success 请选择文件/el-button
/El-上传
/El-表单-项目
/el格式
div class=clickBtn
El-button @ click= close size= small 取消/el-button
El-button @ click= commit size= small type= primary 保存/el-button
/div
/div
/模板
脚本
从" vuex "导入{ mapState，地图操作}。
从导入{计划，mpp}./API/系统接口。js’；
导出默认值{
名称：关联计划，
data() {
返回{
数据模型：{
项目Id:" "，
projectArry:[]，
级别：空，
名称：,
parentId:"0 "
},
defaultProp: {
孩子："孩子",
标签:"名称",
值：" id "
},
//数据校验
规则：{
projectArry: [{必填：真的，消息： 请选择项目，触发器：模糊 }],
名称：[{要求：真，消息： 请输入计划名称，触发器：模糊 }],
级别：[{要求：真，消息： 请选择计划级别，触发器：更改 }]
},
文件：假，
isCompany:false
};
},
计算值：{
.mapState([
listOrgInfoList ，
植物分类员
]),
},
方法：{
.地图操作([
getlistOrgInfoList
]),
update(){
让公司类型=会话存储。getitem(公司类型)；
this.isCompany=companyTypes==4？真：假；
这个。数据模型。arry=JSON项目。解析(会话存储。getitem( select arry )；
},
上传(f) {
//如果(!f){
//这个message.error(请上传文件!);
//返回
//}
这个。数据模型。projectid=this。数据模型。项目arry[这个。数据模型。阿里计划。长度-1]；
let param=new FormData()；//创建形式对象
param.append(file ，f . file)；//通过附加向形式对象添加数据
param.append(level ，this。数据模型。水平)；//添加形式表单中其他数据
param.append(projectId ，this。数据模型。projectId)；//添加形式表单中其他数据
param.append(planName ，this。数据模型。姓名)；//添加形式表单中其他数据
mpp(param)//上传。然后(响应={
if(response.code==200){
这个message.success(上传成功!);
这个。close()；
这个. emit(刷新数据)；
论成功(回应。数据)；
}
})。catch(({err})={
f.onError()
})
},
上传成功(响应、文件、文件列表){
//缓存接口调用所需的文件路径
console.log(文件上传成功)
//这个message.success(上传成功!);
},
手柄移除(文件，文件列表){
//更新缓存文件
console.log(文件删除)
},
//重置方法
重置(){
const associationPlan=this .$ refs[关联计划]；
关联计划。重置字段()；
这个。数据模型。projectid=null
这个。数据模型。name=
这个。数据模型。级别=" "；
这个。数据模型。project arry=[]；
},
//关闭弹框
close() {
这个. emit( close )；
这个。reset()；
},
//点击提交
提交(){
这个refs[associationPlan].验证（有效={
如果(!有效){
返回；
}
这个参考文献。上传添加。submit()；
//这个。数据模型。projectid=this。数据模型。项目arry[这个。数据模型。阿里计划。长度-1]；
//plan(this.dataModel)
//.然后(响应={
//if (response.code==200) {
//这个message.success(添加成功!);
//这个。close()；
//这个. emit(刷新数据)；
//}其他{
//这个$消息。错误(响应。味精)；
//}
//})
//.接住(错误={
//});
});
},
}
};
/脚本
样式lang=scss 范围。单击Btn {
文本对齐：居中；
}。警告信息{
//color:# feba 51；
颜色：rgb(64，158，255)；
}
/风格
以上这篇某视频剪辑软件元素_ui上传文件，并传递额外参数操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。