|
<template>
|
<a-button type="primary" @click="handleClick">
|
<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="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>
|
</a-modal>
|
</template>
|
|
<script lang="ts" setup>
|
import { onMounted, onBeforeMount, reactive, ref, computed } from "vue";
|
import axios from 'axios';
|
let CancelToken = axios.CancelToken
|
let source = null
|
const visible = ref(false);
|
const loading = ref(false);
|
const activeKey = ref('1');
|
const formRef = ref(null);
|
const uploadList = ref([]);
|
const form = reactive({
|
name: '',// 用户名
|
nameJoin: '',// 昵称
|
post: '',// 岗位
|
txt: '',// 备注
|
});
|
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 handleSubmit = ({values, errors}) => {
|
console.log('values:', values, '\nerrors:', errors)
|
}
|
|
const handleClick = () => {
|
visible.value = true;
|
};
|
const handleBeforeOk = (done) => {
|
|
};
|
const handleCancel = () => {
|
visible.value = false;
|
}
|
|
const handleOpened =(el) => {
|
uploadList.value = [];
|
console.log(uploadList, 'uploadList');
|
console.log(activeKey.value, 'activeKey');
|
}
|
const activeKeyChange = (value)=>{
|
activeKey.value = value;
|
}
|
onBeforeMount(()=>{
|
|
})
|
onMounted(()=>{
|
|
|
})
|
</script>
|
|
<script lang="ts">
|
export default {
|
name: 'add',
|
methods: {
|
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.aUpload {
|
width: 100%;
|
max-height: 500px;
|
overflow: hidden;
|
overflow-y: auto;
|
}
|
</style>
|
