props参数设置 props:{ files:{ type:Array },//图片数组 titleSrc:{ type:Boolean, default: tru_vue accept">
赞
踩
input标签
<input type="file" @change="fileChanged" ref="file" multiple="multiple" :accept="accept" class="ivu-upload-input">
props参数设置
props:{ files:{ type:Array },//图片数组 titleSrc:{ type:Boolean, default: true },//是否可新增/删除 accept:{ type:String, default: 'image/png,image/jpeg,image/jpg' },//格式 fileCount: { type: [String,Number], required: false, default: 1 },//上传数量 filetype:{ type: [String,Number], },//上传功能type区分 timestampName: { type: Boolean, required: false, default: false },//是否使用时间戳名称 previewDisplay: { type: Boolean, required: false, default: false },//是否展示预览列表 },
data
data() {
return {
uplist:[],
}
},
方法
//父组件中通过 this.$refs.XX.add() 调用触发 add() { this.$refs.file.value = ''; this.$refs.file.click(); }, //本地上传change事件 fileChanged() { const list = this.$refs.file.files; if (list.length>0){ if (list.length>this.fileCount*1) { this.$message.warning('上传数量超限!'); return } this.uplist = []; for (let i = 0; i < list.length; i++) { if (!this.typeJy(list[i]).status) { this.$message.warning(`上传格式仅支持${this.typeJy(list[i]).type.toString()}`); return } if (list[i].size>10*1024 * 1024) { this.$message.warning('上传大小不能超过10M!'); return } const item = { name: list[i].name, size: list[i].size, file: list[i] }; this.html5Reader(list[i], item); this.uplist.push(item); } this.$refs.file.value = ''; this.submit(); } }, //格式判断 typeJy(file){ const imgFileType = this.accept.split(','); let type = []; for(let i=0;i<imgFileType.length;i++){ let HZHUI = imgFileType[i].match(/[^\/||\.]+(?!.*\/)/)[0] type.push(HZHUI) } const filetype = file.name const suffix = filetype.substring(filetype.lastIndexOf('.')+1) //比较且不区分大小写 if(!type.some(i=>i.toLowerCase()==suffix.toLowerCase())){ return { status:false, type:type, } }else{ return { status:true, type:type, } } }, //上传oss submit() { let that=this; // 这里是OSS多条上传 const fNum = this.uplist; for(let i=0;i<fNum.length;i++){ let f=fNum[i].file; const Name=f.name; const suffix = Name.substr(Name.indexOf(".")); const obj=this.timestamp(); let storeAs; if (this.timestampName){//是否使用时间戳名称 storeAs = 'salary/'+obj+i+'/'+obj+suffix ;// 路径+时间戳+后缀名 } else{ storeAs = 'salary/'+obj+i+'/'+Name ;// 路径+上传文件名称 } that.upProms(f,i); } }, // 异步 upProms(f,i){ let that = this; let time = new Date().getTime(); let formData = new window.FormData(); formData.append( 'file' , f ); formData.append( 'name' , f.name ); formData.append( 'time' , time ); formData.append( 'type' , that.filetype ); //调用上传接口 postUploadFile(formData).then(function(res){ if ( res.data.code ===0 ) { that.files.push(res.data.data); that.$set(that.uplist[i],'url',res.data.data) that.listResult(); } }) }, // 时间戳 timestamp:function(){ const time = new Date(); const y = time.getFullYear(); const m = time.getMonth()+1; const d = time.getDate(); const h = time.getHours(); const mm = time.getMinutes(); const s = time.getSeconds(); const ms = time.getMilliseconds(); return ""+y+this.Add0(m)+this.Add0(d)+this.Add0(h)+this.Add0(mm)+this.Add0(s)+this.Add0(ms); }, //处理日期 Add0:function(m){ return m<10?'0'+m : m; } , //给父组件返回数组 listResult(){ this.$emit("listResult",this.uplist) }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。