| | |
| | | <template #icon> |
| | | <icon-plus /> |
| | | </template> |
| | | 新建文件 |
| | | 新增文件 |
| | | </a-button> |
| | | <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=".word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt," :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 } from "vue"; |
| | | |
| | | 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 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); |
| | | }; |
| | | 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,' |
| | | } |
| | | 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', '//upload-z2.qbox.me/', true); |
| | | xhr.send(formData); |
| | | |
| | | return { |
| | | abort() { |
| | | xhr.abort() |
| | | } |
| | | ) |
| | | // 上传文件 |
| | | 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(()=>{ |
| | | |