附件上传vue组件封装(一)
//子组件部分
<template>
<div class="item attachment attachmentNew">
<span class="btnSpan" v-show="operationType<2" :title="btnName">
<a id="btnName">{{btnName}}</a>
<input type ="file" name="file" @change="uploadFileOnlyOne($event)" class="hiddenClass" :style="{width:uploadBtnWidth + 'px'}"/>
</span>
<ul class="fileContent">
<li v-show="fileList.length>0">
<div class="fileName">文件名</div>
<div class="fileSize">文件大小</div>
<div class="UploadingPerson">上传人</div>
<div class="fileTime">上传时间</div>
<div class="fileRemove" v-show="operationType<2">操作</div>
</li>
<li v-for="(item,index) in fileList">
<div class="fileName"><a :href="prefixUrl+'/file/'+item.url" target="_blank" style="color:#78BC27" :title="item.fileName">{{item.fileName}}</a></div>
<div class="fileSize">{{item.fileSize}}</div>
<div class="UploadingPerson">{{item.userName}}</div>
<div class="fileTime">{{item.createTime|dateDay}}</div>
<div class="fileRemove" v-show="operationType<2" @click="delFile(item.id)"><span class="fa fa-trash-o"></span></div>
</li>
</ul>
</div>
</template>
<script>
import { modal } from '../../common/js/modal.js'
export default {
props:{
//判断是否有删除操作功能,只有编辑和创建的时候才有此功能
operationType:{
default:0
},
//按钮名称与隐藏的input上传附件按钮的宽度要保持一致
uploadBtnWidth:{
default:82
},
//上传附件按钮的名称
btnName:{
type: String,
default:''
},
//同一页面存在多个附件上传按钮,用来区分当前操作的按钮是哪一个;
fileListType:{
type: String,
default:''
},
//当前附件列表
fileList:{
type: Array,
default:[]
},
},
data(){
return{
prefixUrl:$.getCookie('prefixUrl'),
}
},
methods:{
delFile(thisId){
let vm = this;
var params = {
id: thisId
};
var url = '/file/delete';
$.ajaxSend(url, params).done(function (data) {
if (data.code === '00000000') {
vm.fileList.forEach((el,index) =>{
if(thisId===el.id){
vm.fileList.splice(index,1);
}
});
vm.$emit("newFileList",vm.fileList,vm.fileListType);
}
})
},
uploadFileOnlyOne(el){
let vm = this;
var getFiles = el.target.files[0];
var fileName = getFiles.name;
var fFN = fileName.substring(0,fileName.lastIndexOf('.'));
if(/[@#\$%\^&\*]+/g.test(fFN)){
modal.error('文件名不能包含特殊符号!');
return false;
}
var fLN = fileName.substring(fileName.lastIndexOf('.')+1,fileName.length);
if(fLN=='doc'||fLN=='docx'||fLN=='xls'||fLN=='xlsx'||fLN=='pdf'||fLN=='PDF'||fLN=='jpg'||fLN=='JPG'||fLN=='png'||fLN=='xlsx'||fLN=='xls'||fLN=='eml'){ }else{
modal.error('只允许上传word/excel/pdf/图片jpg,png/eml文件格式。');
return false;
}
var commonUrl = $.getCookie('prefixUrl');
let sessionId=$.getCookie('sessionId');
let areaCode=$.getCookie('areaCode');
let formData = new FormData();
formData.append('sessionId', sessionId);
// formData.append('areaCode', areaCode);
formData.append('file',getFiles);
$.ajax({
url: commonUrl+'/file/upload',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
if(data.payload.results.file.fileName){
vm.fileList.push(data.payload.results.file);
vm.$emit("newFileList",vm.fileList,vm.fileListType);
}
},
error: function (data) {
console.log('server error!');
}
});
},
},
filters: {
dateDay(input) {
if(input){
var oDate = new Date(input);
return oDate.getFullYear() + '-' + (oDate.getMonth() + 1 > 9 ? oDate.getMonth() + 1 : '0' + (oDate.getMonth() + 1)) + '-' + (oDate.getDate() > 9 ? oDate.getDate() : '0' + oDate.getDate());
}
},
},
mounted(){
//console.log(document.getElementById('btnName').offsetWidth);//获取按钮名称的宽度
}
}
</script>
<style scoped lang='stylus'>
.attachmentNew
.fileContent
padding-left 16px
li
div
display: inline-block
.fileName
width: 200px
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; //文本不换行,这样超出一行的部分被截取,显示...
a:hover
text-decoration underline
.fileSize
width: 80px
.UploadingPerson
width: 100px
.fileTime
width: 120px
.fileRemove
width: 40px
span
color #78BC27
&:hover
cursor pointer
.btnSpan
margin 4px
a
padding 2px 4px
border 1px solid #78BC27
border-radius 4px
background #78BC27
color white
font-size 12px
.hiddenClass
opacity: 0;
position:relative;
top:-20px;
height:20px; </style>
附件上传vue组件封装(一)的更多相关文章
- React实战之Ant Design—Upload上传_附件上传
React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...
- 循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理
在我们一般系统中,往往都会涉及到附件的处理,有时候附件是图片文件,有时候是Excel.Word等文件,一般也就是可以分为图片附件和其他附件了,图片附件可以进行裁剪管理.多个图片上传管理,及图片预览操作 ...
- 基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用
大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...
- 基于MVC4+EasyUI的Web开发框架形成之旅(4)--附件上传组件uploadify的使用
大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...
- (转)基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用
http://www.cnblogs.com/wuhuacong/p/3343967.html 大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随 ...
- java 附件上传、下载前后端代码
前言:业务需要:附件上传,需要同时满足浏览器上传,和APP上传附件,并且浏览器端不可使用form表单提交,因为表单提交无法直接获取返回值,除非刷新页面才可显示上传的附件.所以此处使用ajaxfileu ...
- 使用plupload做一个类似qq邮箱附件上传的效果
公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...
- SNF开发平台WinForm之六-上传下载组件使用-SNF快速开发平台3.3-Spring.Net.Framework
6.1运行效果: 6.2开发实现: 1.先在要使用的项目进行引用,SNF.WinForm.Attachments.dll文件. 2.在工具箱内新建选项卡->选择项,浏览找到文件SNF.WinFo ...
- fsLayuiPlugin附件上传使用说明
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
随机推荐
- .NET开发辅助工具-ANTS Performance Profiler【转载】
https://blog.csdn.net/Eye_cng/article/details/50274109
- TypeError: '<' not supported between instances of 'str' and 'int'
<不支持str实例和int实例之间的对比 birth是str类型 2000是int类型 所以无法对比,报错 birth = input('birth: ') if birth < 2000 ...
- MongoDB概念、安装和配置
1.概念 分布式文档存储,高读写吞吐量,自动灾备,可伸缩. 不需要遵守严格的数据schema意味着mongodb更灵活.更适合快速开发. 2.安装 2.1 yum 安装 配置yum源 = [mongo ...
- main.js中的Vue.config.productionTip = false
开发模式:npm run dev是前端自己开发用的生产模式:npm run build 打包之后给后端放在服务端上用的Vue.config.productionTip = false1上面这行代码的意 ...
- 一个提高照片质量的网站和一个改变照片DPI的方法
相信很多童鞋都有遇到过,碰到一张很喜欢的图片,想用来做背景什么的,蛋似--因为画质太AV了怕引起误会,所以不敢使用!很气--!! 这时大神就会跳出来说,画质不好?PS是用来吃si的么! 我:我才不会用 ...
- 【机器学习】ICA算法简介
ICA算法的研究可分为基于信息论准则的迭代估计方法和基于统计学的代数方法两大类,从原理上来说,它们都是利用了源信号的独立性和非高斯性.基于信息论的方法研究中,各国学者从最大熵.最小互信息.最大似然和负 ...
- 纪录一次left join一对多关系而引起的BUG
纪录一次left join一对多关系而引起的BUG MySQL(11)---纪录一次left join一对多关系而引起的bug BUG背景 我们有一个订单表 和 一个 物流表 它们通过 订单ID 进行 ...
- 在学习python的Django\Flask\Tornado前你需要知道的,what is web?
我们都在讲web开发web开发,那到底什么是web呢? 如果你正在学习python三大主流web框架,那这些你必须要知道了 软件开发架构: C/S架构:Client/Server 客户端与服务端 ...
- Macaca环境搭建(四)----mac系统macaca安装
一.安装Homebrew 命令:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/insta ...
- 【Python】【基础知识】【内置函数】【object的使用方法】
原英文帮助文档: class object Return a new featureless object. object is a base for all classes. It has the ...