用Django实现文件的上传下载,前后端不分离_django 从前端到后端下载文件

作者：IT小白 | 2024-04-26 06:45:27

踩

django 从前端到后端下载文件

用Django实现文件的上传下载,前后端不分离

在这里插入图片描述

首先需要在setting中加入下面两行代码,将media加入到BASE_DIR中

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
1
2

在你项目的urls中加入下面一行

url(r'^media/(?P<path>.*)$', serve, {'document_root': MEDIA_ROOT}, name='media'),
# 完整的urls
from django.conf.urls import url
from django.contrib import admin
from django.urls import path, include
from django.views.static import serve

from mytest01.settings import MEDIA_ROOT

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/',include("myapp01.urls")),
    url(r'^media/(?P<path>.*)$', serve, {'document_root': MEDIA_ROOT}, name='media'),
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

app下的urls

from django.urls import path
from myapp01 import views

urlpatterns = [
    path('upload/',views.UploadFile)
]
1
2
3
4
5
6

views代码

def UploadFile(request):
    data = {}
    if request.method == "POST":
        upload_file = request.FILES.get("uploadfile")
        file_name = os.path.splitext(upload_file.name)
        print(file_name)
        print(upload_file.name)
        print(upload_file.size)
        # FileSystemStorage类继承自Storage类，location是存储文件的绝对路径，默认值是
        # settings中的MEDIA_ROOT值，base_url默认值是settings中的MEDIA_URL值。
        fs = FileSystemStorage()
        filename = fs.save(upload_file.name, upload_file)
        data = {
            "file_data": "http://127.0.0.1:8001" + str(fs.url(filename))}
    return render(request, 'upload.html', context=data)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

templates upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>Upload</h2>
    <form method="post" enctype = "multipart/form-data">
        <input type="file" name="uploadfile">
        <button type="submit">upload file</button>
    </form>
        <h1><a href="{{ file_data }}">download</a></h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

文件上传前端写的很low,哈哈,大家凑合看

点击预览

在这里插入图片描述

选择文件,点击打开

在这里插入图片描述

点击upload file 按钮即可实现文件上传功能

在这里插入图片描述

上传的文件在media下,因为之前上传了一个文件,再次上传相同的文件,系统会自动给文件加上7位后缀,防止重名

在这里插入图片描述

文件下载,点击download,确定即可实现文件下载功能

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/489577