vue3 + element-plus 的 upload + axios + django 文件上传并保存

之前在网上搜了好多教程,一直没有找到合适自己的,要么只有前端部分没有后端,要么就是写的不是很明白。所以还得靠自己摸索出来后,来此记录一下整个过程。

  • 其实就是不要用默认的 action,要手动实现上传方式 http-request,然后再传给后端进行各种操作了
    • 这里隐藏了文件展示列表
    • 展示了上传文件的个数
    • 文件去重上传
    • 也对上传文件的格式做了限制
    • 在点击创建的时候 progress 会随着上传进度动态变化

环境安装什么的就不讲了,直接上代码好吧,这个是样式图

这是vue3代码

html 复制代码
<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">拖拽 / 点击上传文件 ( 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">创建</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("任务创建成功")
      }
      else { public_elmsg_error(res.msg) }
  }
  );
}
</script>

v3版本的 djagno 代码

python 复制代码
from loguru import logger
from django.http.response import JsonResponse
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
    def 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"})
相关推荐
yanxing.D2 小时前
OpenCV轻松入门_面向python(第六章 阈值处理)
人工智能·python·opencv·计算机视觉
JJJJ_iii3 小时前
【机器学习01】监督学习、无监督学习、线性回归、代价函数
人工智能·笔记·python·学习·机器学习·jupyter·线性回归
知识分享小能手6 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
Python图像识别6 小时前
71_基于深度学习的布料瑕疵检测识别系统(yolo11、yolov8、yolov5+UI界面+Python项目源码+模型+标注好的数据集)
python·深度学习·yolo
MC丶科7 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20167 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
淮北4948 小时前
windows安装minicoda
windows·python·conda
爱喝白开水a9 小时前
LangChain 基础系列之 Prompt 工程详解:从设计原理到实战模板_langchain prompt
开发语言·数据库·人工智能·python·langchain·prompt·知识图谱
90后的晨仔9 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
90后的晨仔10 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js