修改添加组件
This commit is contained in:
qq787203167
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal v-model="visible" :maskClosable="false" :footer="[]" :title="title">
|
||||
<a-upload-dragger
|
||||
accept='*.*'
|
||||
:disabled="disabled"
|
||||
class="ant-upload-list"
|
||||
name="file"
|
||||
:file-list="myfileList"
|
||||
:multiple="true"
|
||||
:action = 'uploadAction'
|
||||
:headers="headers"
|
||||
:before-upload="beforeUpload"
|
||||
:remove='remove'
|
||||
@change="handleChange">
|
||||
<p><a-icon style="font-size: 67px;color: #c0c4cc;" type="cloud-upload" /></p>
|
||||
<p class="ant-upload-text" style="font-size: 14px;line-height: 30px">点击上传</p>
|
||||
</a-upload-dragger>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { ACCESS_TOKEN } from "@/store/mutation-types"
|
||||
export default {
|
||||
name: 'file',
|
||||
props:['disableds','disabled','thisFileUploadUrl','readonly','thisFileType'],
|
||||
data(){
|
||||
return{
|
||||
visible:false,
|
||||
title:'上传文件',
|
||||
uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
|
||||
myuploadAction:window._CONFIG['domianURL']+this.thisFileUploadUrl,
|
||||
upDataList:[],
|
||||
downLoadFileUrl:window._CONFIG['domianURL']+'/sys/common/static',
|
||||
fileList:[],
|
||||
myfileList:[],
|
||||
isLoding:false,
|
||||
}
|
||||
},
|
||||
created(){
|
||||
const token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.headers = {"X-Access-Token":token};
|
||||
this.containerId = 'container-ty-'+new Date().getTime();
|
||||
},
|
||||
mounted(){
|
||||
// console.log(this.thisFileType,this.thisFileSize,this.thisFileUploadUrl);
|
||||
},
|
||||
methods:{
|
||||
perentHandleFunc(data){
|
||||
this.myfileList = data
|
||||
this.fileList = data
|
||||
if (data && data.length > 0){
|
||||
this.myfileList.forEach((res)=>{
|
||||
res.name = res.fileName
|
||||
res.uid = res.id
|
||||
})
|
||||
}else {
|
||||
this.myfileList = []
|
||||
this.fileList = []
|
||||
}
|
||||
},
|
||||
beforeUpload(file) {
|
||||
console.log(file)
|
||||
// let thisFileType = this.thisFileType.replace(/\s+/g, "");
|
||||
this.fileTypeSatus = true;
|
||||
//TODO 客户要求不拦截文件
|
||||
// if(file.type){
|
||||
// if (thisFileType.indexOf(file.type) != -1) {
|
||||
// this.fileTypeSatus = true;
|
||||
// }else{
|
||||
// this.fileTypeSatus = false;
|
||||
// }
|
||||
// }else{
|
||||
// if(file.name.slice(file.name.length - 3 , file.name.length) == 'rar'){
|
||||
// this.fileTypeSatus = true
|
||||
// }else if(file.type == 'application/x-zip-compressed'){
|
||||
// this.fileTypeSatus = true
|
||||
// }else{
|
||||
// this.fileTypeSatus = false;
|
||||
// }
|
||||
// }
|
||||
this.$message.destroy()
|
||||
// 207M.doc文件大小超出100MB限制, 请压缩或降低文件质量!
|
||||
this.errorMessage = file.name + "文件大小超出100MB限制, 请压缩或降低文件质量!";
|
||||
|
||||
},
|
||||
remove(){
|
||||
this.fileTypeSatus = true;
|
||||
},
|
||||
mydownload(item){
|
||||
var fileName = item.fileName;
|
||||
downFile(this.downLoadFileUrl+'/'+item.ext1,{}).then((data)=>{
|
||||
if (!data) {
|
||||
this.$message.destroy()
|
||||
this.$message.warning("文件下载失败")
|
||||
return
|
||||
}
|
||||
if (typeof window.navigator.msSaveBlob !== 'undefined') {
|
||||
window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName)
|
||||
}else{
|
||||
let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
|
||||
let link = document.createElement('a')
|
||||
link.style.display = 'none'
|
||||
link.href = url
|
||||
link.setAttribute('download', fileName)
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link); //下载完成移除元素
|
||||
window.URL.revokeObjectURL(url); //释放掉blob对象
|
||||
}
|
||||
})
|
||||
},
|
||||
mypreview(item){
|
||||
console.log(item);
|
||||
let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(this.downLoadFileUrl+'/'+item.ext1)
|
||||
window.open(url, '_blank')
|
||||
},
|
||||
handleChange(info) {
|
||||
let { file } = info;
|
||||
const status = info.file.status;
|
||||
info.fileList.forEach((val,index)=>{
|
||||
if(val.response && !val.response.result){
|
||||
this.$message.error(val.response.message);
|
||||
info.fileList.splice(index,1)
|
||||
}
|
||||
})
|
||||
if (this.fileTypeSatus) {
|
||||
if (file.size > 100000000) {
|
||||
this.$message.error(this.errorMessage)
|
||||
return
|
||||
}else {
|
||||
if (status === 'error') {
|
||||
this.$emit('uploadSuccess', this.fileList)
|
||||
this.$message.destroy()
|
||||
this.$message.error(`${info.file.name} 文件上传失败。`);
|
||||
} else if (status === 'removed') {
|
||||
this.myfileList = info.fileList;
|
||||
this.fileList = []
|
||||
this.myfileList.forEach((res) => {
|
||||
if (res.response) {
|
||||
this.fileList.push(res.response.result)
|
||||
} else {
|
||||
this.fileList.push(res)
|
||||
}
|
||||
})
|
||||
this.$emit('uploadSuccess', this.fileList)
|
||||
if(this.myfileList.length > 0){
|
||||
this.$message.destroy()
|
||||
this.$message.success(`${info.file.name} 删除成功。`);
|
||||
}
|
||||
} else if (status === 'done') {
|
||||
this.fileList = []
|
||||
this.myfileList = info.fileList;
|
||||
if (info.fileList.length > 20) {
|
||||
info.fileList.splice(20)
|
||||
this.myfileList = info.fileList;
|
||||
this.myfileList.forEach((res) => {
|
||||
if (res.response) {
|
||||
this.fileList.push(res.response.result)
|
||||
} else {
|
||||
this.fileList.push(res)
|
||||
}
|
||||
})
|
||||
this.$emit('uploadSuccess', this.fileList)
|
||||
this.$message.destroy()
|
||||
this.$message.error('最多只能上传二十个');
|
||||
return
|
||||
}
|
||||
this.myfileList.forEach((res) => {
|
||||
if (res.response) {
|
||||
this.fileList.push(res.response.result)
|
||||
} else {
|
||||
this.fileList.push(res)
|
||||
}
|
||||
})
|
||||
this.$emit('uploadSuccess', this.fileList)
|
||||
if(this.myfileList.length > 0){
|
||||
this.$message.destroy()
|
||||
this.$message.success(`${info.file.name} 文件上传成功。`);
|
||||
}
|
||||
} else if (status === 'uploading') {
|
||||
this.myfileList = info.fileList;
|
||||
this.$emit('uploadSuccess')
|
||||
// this.$message.success(`${info.file.name} 文件上传成功。`);
|
||||
}
|
||||
}
|
||||
}else{
|
||||
this.$message.warning('不支持上传该类型的文件!')
|
||||
}
|
||||
},
|
||||
resetFileList(){
|
||||
this.myfileList = [];
|
||||
this.fileList = [];
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user