| | |
| | | <a-modal v-model:visible="visible" title="上传文件" @before-open="handleOpened" @cancel="handleCancel" @before-ok="handleBeforeOk" title-align="start"> |
| | | <a-tabs :default-active-key="activeKey" @change="activeKeyChange"> |
| | | <a-tab-pane key="1" title="文件"> |
| | | <div class="aUpload"> |
| | | <!-- <a-upload :file-list="uploadList" draggable accept=".word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt, .pdf, .mp4, .avi, .mp3,.wav, .wma, .wmv, .rm," :custom-request="customRequest" />--> |
| | | <a-upload :file-list="uploadList" draggable :accept="acceptNameList" :custom-request="customRequest" /> |
| | | </div> |
| | | </a-tab-pane> |
| | | <a-tab-pane key="2" title="文件夹"> |
| | | <div class="aUpload"> |
| | | <a-upload :file-list="uploadList" draggable accept=".word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt," directory :custom-request="customRequest" /> |
| | | </div> |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | <div class="aUpload"> |
| | | <!-- <a-upload :file-list="uploadList" draggable accept=".word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt, .pdf, .mp4, .avi, .mp3,.wav, .wma, .wmv, .rm," :custom-request="customRequest" />--> |
| | | <a-upload |
| | | action="/" |
| | | :auto-upload="false" |
| | | ref="uploadRef" |
| | | :file-list="uploadList" |
| | | draggable |
| | | :directory="directory" |
| | | @change="onChange" |
| | | multiple |
| | | /> |
| | | </div> |
| | | </a-modal> |
| | | </template> |
| | | |
| | | <script lang="ts" setup> |
| | | import { onMounted, onBeforeMount, reactive, ref, computed } from "vue"; |
| | | import axios from 'axios'; |
| | | import { kbdocumentupload } from "@/api/kbList"; |
| | | import { Message } from '@arco-design/web-vue'; |
| | | let CancelToken = axios.CancelToken |
| | | let source = null |
| | | const visible = ref(false); |
| | | const loading = ref(false); |
| | | const directory = ref(false); |
| | | const activeKey = ref('1'); |
| | | const formRef = ref(null); |
| | | const uploadList = ref([]); |
| | |
| | | post: '',// 岗位 |
| | | txt: '',// 备注 |
| | | }); |
| | | const props = defineProps(['kbobj']) |
| | | const emit = defineEmits(['changeFetchData']) |
| | | const uploadRef = ref(); |
| | | const files = ref([]); |
| | | console.log(props.kbobj); |
| | | const acceptNameList = computed( |
| | | ()=>{ |
| | | return '.word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt, .pdf, .mp4, .avi, .mp3,.wav, .wma, .wmv, .rm,' |
| | | } |
| | | ) |
| | | const customRequest = (option) => { |
| | | const {onProgress, onError, onSuccess, fileItem, name} = option |
| | | const xhr = new XMLHttpRequest(); |
| | | if (xhr.upload) { |
| | | xhr.upload.onprogress = function (event) { |
| | | let percent; |
| | | if (event.total > 0) { |
| | | // 0 ~ 1 |
| | | percent = event.loaded / event.total; |
| | | } |
| | | onProgress(percent, event); |
| | | }; |
| | | } |
| | | xhr.onerror = function error(e) { |
| | | onError(e); |
| | | }; |
| | | xhr.onload = function onload() { |
| | | if (xhr.status < 200 || xhr.status >= 300) { |
| | | return onError(xhr.responseText); |
| | | } |
| | | onSuccess(xhr.response); |
| | | }; |
| | | |
| | | const formData = new FormData(); |
| | | formData.append(name || 'file', fileItem.file); |
| | | xhr.open('post', '/v1/user/login', true); |
| | | xhr.send(formData); |
| | | |
| | | return { |
| | | abort() { |
| | | xhr.abort() |
| | | } |
| | | } |
| | | }; |
| | | // 上传文件 |
| | | // async submitForm = ()=>{ |
| | | // if (this.fileList && this.fileList.length > 0) { |
| | | // source = CancelToken.source() |
| | | // this.fileUploadLoad = true |
| | | // const formdata = new FormData() |
| | | // let param = { |
| | | // userName: this.userInfo.userName, |
| | | // userId: this.userInfo.userID, |
| | | // cfeId: this.currow.conferences[0].id, |
| | | // } |
| | | // this.fileList.map((item) => { |
| | | // formdata.append('file', item.raw) |
| | | // }) |
| | | // uploadCfeFile( |
| | | // { param, formdata }, |
| | | // (progressEvent) => { |
| | | // let total = progressEvent.total |
| | | // let loaded = progressEvent.loaded |
| | | // this.uploadPercent = parseInt(((loaded / total) * 100).toFixed(0)) |
| | | // }, |
| | | // source |
| | | // ) |
| | | // .then((res) => { |
| | | // if (res.data.code === '0') { |
| | | // //上传成功 |
| | | // this.$successMessage( |
| | | // this.translateTitle( |
| | | // 'json_fileupload.json_file_tip.json_file_tip08' |
| | | // ) |
| | | // ) |
| | | // this.fileList = [] |
| | | // this.$refs.upload.clearFiles() |
| | | // this.queryList() |
| | | // } else { |
| | | // this.$errorMessage(res.data.message) |
| | | // } |
| | | // this.fileUploadLoad = false |
| | | // this.uploadPercent = 0 |
| | | // }) |
| | | // .catch((error) => { |
| | | // this.fileUploadLoad = false |
| | | // this.uploadPercent = 0 |
| | | // if (axios.isCancel(error)) { |
| | | // //已终止上传 |
| | | // this.$errorMessage( |
| | | // this.translateTitle( |
| | | // 'json_fileupload.json_file_tip.json_file_tip09' |
| | | // ) |
| | | // ) |
| | | // } else { |
| | | // this.$errorMessage('文件大小超过限制,上传失败') |
| | | // } |
| | | // }) |
| | | // } else { |
| | | // //请选择要上传的文件 |
| | | // this.$warningMessage( |
| | | // this.translateTitle('json_fileupload.json_file_tip.json_file_tip10') |
| | | // ) |
| | | // } |
| | | // } |
| | | |
| | | |
| | | const submitForm = async()=>{ |
| | | if (files.value && files.value.length > 0) { |
| | | files.value.map((item) => { |
| | | const formData = new FormData() |
| | | formData.append(name || 'file', item.file); |
| | | formData.append('kb_id', props.kbobj.id); |
| | | kbdocumentupload(formData).then((res) => { |
| | | if(res.code == 0){ |
| | | emit('changeFetchData') |
| | | Message.success('上传成功'); |
| | | visible.value = false; |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | } |
| | | |
| | | const handleSubmit = ({values, errors}) => { |
| | | console.log('values:', values, '\nerrors:', errors) |
| | | |
| | | } |
| | | |
| | | |
| | | const onChange = (fileList) => { |
| | | files.value = fileList; |
| | | }; |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | const handleClick = () => { |
| | | visible.value = true; |
| | | }; |
| | | const handleBeforeOk = (done) => { |
| | | |
| | | submitForm(); |
| | | }; |
| | | const handleCancel = () => { |
| | | visible.value = false; |
| | | } |
| | | |
| | | const handleOpened =(el) => { |
| | | console.log(props.kbobj); |
| | | uploadList.value = []; |
| | | console.log(uploadList, 'uploadList'); |
| | | console.log(activeKey.value, 'activeKey'); |
| | | } |
| | | const activeKeyChange = (value)=>{ |
| | | activeKey.value = value; |
| | | directory.value = value == '2' ? true : false; |
| | | } |
| | | onBeforeMount(()=>{ |
| | | |