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

座右铭：怎么简单怎么来，以实现功能为主。

欢迎大家关注公众号与我交流

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

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

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

这是vue3代码

v3版本的 djagno 代码

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"})