1.上传组件（可上传多个文件）
<template> <div class="attachmentN"> <span class="btnSpan" v-show="operationType<2" :title="btnName" :class="{'active': showButton === false}"> <a id="btnName" class="btnNameA" v-show='showButton'>{{btnName}}</a> <!-- :style="{uploadBtnWidth + 'px'}" --> <input type ="file" name="file" v-show='showButton' @change="uploadFileOnlyOne($event)" class="hiddenClass" /> </span> <span v-show="operationType<2&&attachmentContent">({{attachmentContent}})</span> <ul class="fileContent" :class="{'active': showButton === false}"> <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" :class="{'active': showButton === false}">操作</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 v-show='showButton' class="iconfont icon-shanchu"></span></div> </li> </ul> </div> </template> <script> import { modal } from '../../common/js/modal.js' export default { props:{ //判断是否有删除操作功能，只有编辑和创建的时候才有此功能 operationType:{ default:0 }, showButton: { type: Boolean, default: true }, //按钮名称与隐藏的input上传附件按钮的宽度要保持一致 uploadBtnWidth:{ default:82 }, //上传附件按钮的名称 btnName:{ type: String, default:'' }, //上传的附件添加类型备注 attachmentContent:{ 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]; if (getFiles.size > 20 * 1024 * 1024) { modal.error('上传文件尺寸不能大于20M'); return } 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'> .attachmentN padding-top 4px .fileContent padding-left 6px padding-top 6px &.active margin-bottom 0px li div display: inline-block .fileName 200px overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示... a:hover text-decoration underline .fileSize 80px .UploadingPerson 100px .fileTime 120px .fileRemove 40px &.active display none span color #78BC27 &:hover cursor pointer .btnSpan margin 4px position:relative; &.active display none a padding 4px 4px border 1px solid #78BC27 border-radius 4px background #78BC27 color white font-size 12px .hiddenClass opacity: 0; position: absolute; top 0 left 0 width 100% </style>
2.单个文件上传以及图片尺寸的限制
previewFile(e){
let vm = this;
// 这里用的事件是change就是
let file=e.target.files[0];
vm.flagFile=file;
let reader=new FileReader();
if(file){
reader.readAsDataURL(file);
}
reader.addEventListener('load',()=>{
// this.$refs.imgUpLoad.src=reader.result;
var img = new Image();
img.src = reader.result;
img.onload = function(){
if(img.width!=210||(img.height!=210)){
console.log(''+img.width+',height:'+img.height);
Message('请上传尺寸大小为210*210的图片')
return;
}
vm._postImg(e);
}; // 同时上传图片.
},false);
},
// 选择图片的时候同时提交图片。
_postImg(){
// 上传图片。 直接FormData的是form表单，一个input存session值，一个存文件
let sessionId=$.getCookie('sessionId');
var areaCode=$.getCookie('areaCode');
this.$refs.inputText.value=sessionId;
this.$refs.inputTextArea.value=areaCode;
var commonUrl = $.getCookie('prefixUrl');
let fdata=new FormData($('#uploadForm')[0]);
$.ajax({
url: commonUrl+'/file/upload',
type: 'POST',
data: fdata,
async: false,
cache: false,
contentType: false,
processData: false,
success:(data)=>{
// 获取上传的id;
this.attachmentId=data.payload.results.file.id;
this.imgsrc=data.payload.results.file.url;
},
error:(err)=>{
}
})
},