之前在網(wǎng)上搜了好多教程，一直沒有找到合適自己的，要么只有前端部分沒有后端，要么就是寫的不是很明白。所以還得靠自己摸索出來后，來此記錄一下整個過程。

• 其實就是不要用默認(rèn)的 action，要手動實現(xiàn)上傳方式?http-request，然后再傳給后端進(jìn)行各種操作了
  • 這里隱藏了文件展示列表
  • 展示了上傳文件的個數(shù)
  • 文件去重上傳
  • 也對上傳文件的格式做了限制
  • 在點(diǎn)擊創(chuàng)建的時候 progress 會隨著上傳進(jìn)度動態(tài)變化

環(huán)境安裝什么的就不講了，直接上代碼好吧，這個是樣式圖

這是vue3代碼

<template><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><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">拖拽 / 點(diǎn)擊上傳文件 ( zip, jpg, png ……)</div><template #tip><div class="el-upload__tip">已上傳 {{ fileListLength }} 個文件</div></template></el-upload><el-progress :percentage="progress.curr" :color="progress.color" /><el-button type="info" class="btn" @click="removeFile">清空文件</el-button><el-button type="primary" class="btn" @click="create">創(chuàng)建</el-button>
</template><script setup lang="ts">
import { ref, watch } from "vue";
import http from "@/utils/axios/index";
import { UploadFilled } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';const public_elmsg_success = (msg: string) => {ElMessage({ type: 'success', duration: 1000, showClose: true, message: msg })
};const public_elmsg_warning = (msg: string) => {ElMessage({ type: 'warning', duration: 1000, showClose: true, message: msg })
};const public_elmsg_error = (msg: string) => {ElMessage({ type: 'error', duration: 1000, showClose: true, message: msg })
};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"); // 限制了上傳文件的格式 大寫后綴
const upload_lower = ref(upload_accept.value.split(',').map((item: any) => item.toLowerCase())); // 限制上傳文件的格式 小寫后綴
const fileList: any = ref([]);
const fileList1: any = ref([]);
const fileListLength = ref(0);const progress = ref({ "curr": 0, "color": "orange" })watch(fileList1, (newVal, oldVal) => {console.log(newVal, oldVal)fileListLength.value = newVal.value;fileListLength.value = newVal.length;
}, { immediate: true, deep: true });const httpRequest = (options: any) => {let nameList: Array<any> = [];fileList1.value.forEach((item: any) => {nameList.push(item.name);});const file_suffix = options.file.name.split(".");if (!upload_lower.value.includes(`.${file_suffix[file_suffix.length - 1]}`)) {public_elmsg_warning(`文件 ${options.file.name} 格式不正確`);return;}if (nameList.includes(options.file.name)) { }else {fileList1.value.push(options.file)}fileList.value = fileList1.value;
}const removeFile = () => {fileList.value = [];fileList1.value = [];progress.value.curr = 0;
}const create = () => {const formData = new FormData()fileList1.value.forEach((file: any) => {console.log(file)formData.append('files', file)})http.post("task/create/", formData, {headers: { "Content-Type": "multipart/form-data" }, onUploadProgress(progressEvent: any) {progress.value.curr = Math.round((progressEvent.loaded * 100) / progressEvent.total)if (progress.value.curr == 100) { progress.value.color = 'green' }else { progress.value.color = 'orange' }},}).then((res: any) => {if (res.code == 0) {public_elmsg_success("任務(wù)創(chuàng)建成功")}else { public_elmsg_error(res.msg) }});
}
</script>

v3版本的 djagno 代碼

from loguru import logger
from django.http.response import JsonResponse
from django.views.decorators.csrf import csrf_exempt@csrf_exemptdef create_task(request):files = request.FILES.getlist('files')for fit in files:logger.info(f"name: {fit.name} size: {round(fit.size/ 1024 / 1024 / 1024, 5)} G")# 保存文件#  with open(f"{os.sep.join(['.', fit['name']])}", mode="wb") as f:#         f.write(fit)return JsonResponse({"code": 0, "msg": "success"})