前言

最近新需求要使用vue框架,并且在主、子表单中实现图片上传显示功能.

定义slot插槽

主表单

action 随便写,
:file-list 为主表单图片绑定属性,必须为数组,如: [{name:xxx,url:http://xxx/uploda}]
:http-request 自定义上传方法
:on-exceed 图片超出限制数量回调方法
UploadShowFlag控制按钮显示标识属性,查看时不显示

<template slot-scope="scope" slot="imageUrlForm"><el-uploadclass="upload-demo"action="fakeaction":file-list="form.imageUrls":limit="1":on-exceed="uploadExceed":http-request="uploadAppFile"list-type="picture"><el-button v-show="UploadShowFlag" size="small" type="primary">点击上传</el-button><div v-show="UploadShowFlag" slot="tip" class="el-upload__tip">只能上传png/tiff文件，且不超过5M</div></el-upload>
</template>

子表单

基本配置同主表单
:file-list=“scope.row.funImageUrls” 绑定每一行的图片上传属性
:http-request="(file)=>{return uploadFunctionFile(file ,scope.row)}" 自定义子表单图片上传时,(file)=>{return uploadFunctionFile(file ,scope.row)} 才能将该行的参数带到方法里

<template slot-scope="scope" slot="funImageUrlForm"><el-uploadclass="upload-demo"action="fakeaction":file-list="scope.row.funImageUrls":limit="1":on-exceed="uploadExceed":http-request="(file)=>{return uploadFunctionFile(file ,scope.row)}"list-type="picture"><el-button v-show="UploadShowFlag" size="small" type="primary">点击上传</el-button><div v-show="UploadShowFlag" slot="tip" class="el-upload__tip">只能上传png/tiff文件，且不超过5M</div></el-upload>
</template>

表单属性配置

主表单

{label: 'icon配图',prop: 'imageUrl',span: 24,formslot: true,
}

子表单

{label: 'icon配图',prop: 'funImageUrl',span: 24,formslot: true,
}

方法事件

主表单

自定义修改附件名称
图片格式校验
上传后图片显示

uploadAppFile(params) {const  file =params.file;const prefix='app_';const  applicationId=this.form.applicationId;const  fileName = applicationId === '' ? prefix+file.name : prefix+applicationId+'_1'+".png";const isImage = file.type.indexOf("image") != -1;const  isLt5M = file.size / 1024 / 1024 < 5;if (!isImage) {this.$message.error("只能上传图片格式png、jpg、gif!");return;}if (!isLt5M) {this.$message.error("只能上传图片大小小于5M");return;}// 根据后台需求数据格式serviceFunupload(fileName , file).then(res => {if(res.data.success){this.$message.success("图片上传成功！");const appImageUrl=res.data.data.link;const appImageName=appImageUrl.substring(appImageUrl.lastIndexOf("/")+1,appImageUrl.length);this.form.imageUrl=appImageUrl;this.form.imageUrls= [{ name: appImageName, url: appImageUrl }];}else {this.$message.error(res.data.msg);}});
},

子表单

自定义修改附件名称
图片格式校验
上传后对该行进行图片显示

uploadFunctionFile(params, row) {const  file =params.file;const prefix='fun_';const  fileName = row.functionId === '' ? prefix+file.name : prefix+row.functionId+'_1'+".png";const isImage = file.type.indexOf("image") != -1;const  isLt5M = file.size / 1024 / 1024 < 5;if (!isImage) {this.$message.error("只能上传图片格式png、jpg、gif!");return;}if (!isLt5M) {this.$message.error("只能上传图片大小小于5M");return;}// 根据后台需求数据格式serviceFunupload(fileName , file).then(res => {if(res.data.success){this.$message.success("图片上传成功！");const funImageUrl=res.data.data.link;const funImageName=funImageUrl.substring(funImageUrl.lastIndexOf("/")+1,funImageUrl.length);row.funImageUrl= res.data.data.link;row.funImageUrls= [{ name: funImageName, url: funImageUrl }];}else {this.$message.error(res.data.msg);}});
}

uploadExceed

uploadExceed() {this.$message.error("每次只能上传一个文件，请先移除再上传");
},

后端请求

//附件上传
export const serviceFunupload = (fileName, file) => {const directory ='xxxxx'const formData = new FormData();formData.append('file', file);formData.append('fileName', directory+fileName);return request({headers: {"Content-Type": "multipart/form-data"},url: '/api/xxx/endpoint/put-file-attach-by-name',method: 'post',data: formData})
}

效果展示

avue主、子表单自定义图片上传相关推荐

上传图片的表单java代码_java模拟post方式提交表单实现图片上传(示例代码)
转自:http://blog.csdn.net/5iasp/article/details/8669644 模拟表单html如下: java代码如下: [java] view plain copy p ...
ajaxSubmit 提交表单实现图片上传
<html> <head> <meta content="text/html"; charset=utf8 /> <title&g ...
[RFC1867] HTML中基于表单的文件上传
网络工作组:E. Nebel 征求意见:1867 L. Masinter 类别:试验施乐公司十一月 1995 HTML中基于表单的文件上传这个备忘录的状态这个备忘录为互联网社区定义了一个试验协 ...
ASP.NET MVC (三、表单与文件上传)
目录前言: 1. 表单操作 2.文件上传前言: 本章节主要针对文件上传进行强化练习,关键字[HttpPostedFileBase files,enctype="multipart/for ...
获取当前按钮所在行的input_form表单的input上传文件
在这次的一个小项目中用到了文件的上传,在之前我对form表单的认知还只是发送用户名和密码.行吧,既然用到了那就硬着头皮上咯. 使用首先文件的上传需要一个type=file的input.它的意义就是上 ...
[html] Form表单是怎么上传文件的？你了解它的原理吗？
[html] Form表单是怎么上传文件的?你了解它的原理吗? 简单来说就是把文件转化成字节流,然后使用http进行传输,后端接受后在把二进制转化成原先的文件格式.在HTML表单中,可以上传文件的唯一 ...
单文件图片管理php,php封装的单文件(图片)上传类完整实例
本文实例讲述了php封装的单文件(图片)上传类.分享给大家供大家参考,具体如下: //封装php中的单文件(图片)上传类 /* //参数1:$file 文件数组 5个属性值 name,type,siz ...
ajax 表单提交传文件,Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
php单文件上传实例,php封装的单文件(图片)上传类完整实例
本文实例讲述了php封装的单文件(图片)上传类.分享给大家供大家参考,具体如下: //封装php中的单文件(图片)上传类 /* //参数1:$file 文件数组 5个属性值 name,type,siz ...

avue主、子表单自定义图片上传

前言

定义slot插槽

主表单

子表单

表单属性配置

主表单

子表单

方法事件

主表单

子表单

uploadExceed

后端请求

效果展示

avue主、子表单自定义图片上传相关推荐

最新文章

热门文章