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="{width: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
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
&.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('width:'+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)=>{
}
})
},