- 1 <template>
- 2 <el-upload class="upload-demo form-item" v-model:file-list="fileList" drag multiple :http-request="httpRequest" :show-file-list="false" auto-upload="false" :accept=upload_accept>
- 3 <el-icon class="el-icon--upload"><upload-filled /></el-icon>
- 4 <div class="el-upload__text">拖拽 / 点击上传文件 ( zip, jpg, png ……)</div>
- 5 <template #tip>
- 6 <div class="el-upload__tip">已上传 {{ fileListLength }} 个文件</div>
- 7 </template>
- 8 </el-upload>
- 9 <el-progress :percentage="progress.curr" :color="progress.color" />
- 10 <el-button type="info" class="btn" @click="removeFile">清空文件</el-button>
- 11 <el-button type="primary" class="btn" @click="create">创建</el-button>
- 12 </template>
- 13
- 14 <script setup lang="ts">
- 15 import { ref, watch } from "vue";
- 16 import http from "@/utils/axios/index";
- 17 import { UploadFilled } from '@element-plus/icons-vue';
- 18 import { ElMessage } from 'element-plus';
- 19
- 20
- 21 const public_elmsg_success = (msg: string) => {
- 22 ElMessage({ type: 'success', duration: 1000, showClose: true, message: msg })
- 23 };
- 24
- 25 const public_elmsg_warning = (msg: string) => {
- 26 ElMessage({ type: 'warning', duration: 1000, showClose: true, message: msg })
- 27 };
- 28
- 29 const public_elmsg_error = (msg: string) => {
- 30 ElMessage({ type: 'error', duration: 1000, showClose: true, message: msg })
- 31 };
- 32
- 33 const upload_accept = ref(".JPG,.PNG,.JPEG,.PCD,.MP4,.AVI,.DAT,.DVR,.VCD,.MOV,.SVCD,.VOB,.DVD,.DVTR,.DVR,.BBC,.EVD,.FLV,.RMVB,.WMV,.MKV,.3GP,.ZIP"); // 限制了上传文件的格式 大写后缀
- 34 const upload_lower = ref(upload_accept.value.split(',').map((item: any) => item.toLowerCase())); // 限制上传文件的格式 小写后缀
- 35 const fileList: any = ref([]);
- 36 const fileList1: any = ref([]);
- 37 const fileListLength = ref(0);
- 38
- 39 const progress = ref({ "curr": 0, "color": "orange" })
- 40
- 41
- 42 watch(fileList1, (newVal, oldVal) => {
- 43 console.log(newVal, oldVal)
- 44 fileListLength.value = newVal.value;
- 45 fileListLength.value = newVal.length;
- 46 }, { immediate: true, deep: true });
- 47
- 48 const httpRequest = (options: any) => {
- 49 let nameList: Array<any> = [];
- 50 fileList1.value.forEach((item: any) => {
- 51 nameList.push(item.name);
- 52 });
- 53 const file_suffix = options.file.name.split(".");
- 54 if (!upload_lower.value.includes(`.${file_suffix[file_suffix.length - 1]}`)) {
- 55 public_elmsg_warning(`文件 ${options.file.name} 格式不正确`);
- 56 return;
- 57 }
- 58 if (nameList.includes(options.file.name)) { }
- 59 else {
- 60 fileList1.value.push(options.file)
- 61 }
- 62 fileList.value = fileList1.value;
- 63 }
- 64
- 65 const removeFile = () => {
- 66 fileList.value = [];
- 67 fileList1.value = [];
- 68 progress.value.curr = 0;
- 69 }
- 70
- 71
- 72 const create = () => {
- 73 const formData = new FormData()
- 74 fileList1.value.forEach((file: any) => {
- 75 console.log(file)
- 76 formData.append('files', file)
- 77 })
- 78
- 79 http.post("task/create/", formData, {
- 80 headers: { "Content-Type": "multipart/form-data" }, onUploadProgress(progressEvent: any) {
- 81 progress.value.curr = Math.round((progressEvent.loaded * 100) / progressEvent.total)
- 82 if (progress.value.curr == 100) { progress.value.color = 'green' }
- 83 else { progress.value.color = 'orange' }
- 84 },
- 85 }).then((res: any) => {
- 86 if (res.code == 0) {
- 87 public_elmsg_success("任务创建成功")
- 88 }
- 89 else { public_elmsg_error(res.msg) }
- 90 }
- 91 );
- 92 }
- 93 </script>
- 1 from loguru import logger
- 2 from django.http.response import JsonResponse
- 3 from django.views.decorators.csrf import csrf_exempt
- 4
- 5 @csrf_exempt
- 6 def create_task(request):
- 7 files = request.FILES.getlist('files')
- 8 for fit in files:
- 9 logger.info(f"name: {fit.name} size: {round(fit.size/ 1024 / 1024 / 1024, 5)} G")
- 10 # 保存文件
- 11 # with open(f"{os.sep.join(['.', fit['name']])}", mode="wb") as f:
- 12 # f.write(fit)
- 13
- 14 return JsonResponse({"code": 0, "msg": "success"})