Python Django 文件上传

原创

如此这般那便是极好

修改于 2024-06-13 16:30:42

9900

代码可运行

修改于 2024-06-13 16:30:42

文章被收录于专栏：未来码迹

运行总次数：0

代码可运行

前端代码

在前端HTML，我需要一个上传控件，类型声明是文件。type="file"，并且设置格式为JPEG ，accept="image/jpeg"

注意

需要在form 表单中增加属性 enctype="multipart/form-data"使用二进制传输文件

 <form id="injection" method="post" action="" style="display: none" enctype="multipart/form-data">
     {% csrf_token %}
<div class="form-group">
<label for="robotsphoto">照片:</label>
<input type="file" class="form-control" id="robotsphoto" name="robotsphoto" accept="image/jpeg">
</div>
</form>

JavaScript处理

JavaScript代码：

通过id获取到该文件，并通过feach进行发送POST请求，使用files0确定获取到文件

在发送请求时不要忘记带上"csrfmiddlewaretoken"，

 var machiningphoto = document.getElementById("machiningphoto").files[0];
 formData.append("machiningphoto", machiningphoto);
 formData.append('csrfmiddlewaretoken', document.querySelector('input[name=csrfmiddlewaretoken]').value);
    fetch('/productup/', {
        method: "POST",
        body: formData
    }).then(response => {
        if (response.ok) {
            return response.json().then(data => {
                console.log(response);
                window.location.href = response.url;
                if (data.data === "upload success") {
                    alert("上传成功");
                } else if (data.data === "upload fail") {
                    alert("上传失败");
                } else {
                    alert("请求错误");
                }
            });
        } else {
            alert("请求失败，请检查网络");
            return;
        }
    }).catch(error => {
        console.error('Error:', error);
        alert('请求失败');
        return false;
    });

    return false;

Django视图函数

大致流程，获取到文件，使用二进制读取并保存文件，为保证图片的一致性，我们一般要使用随机数字作为图片名称

图片名称随机代码，

def imagename():
    # 生成 12 位随机数
    secret_key = ''.join(str(random.randint(0, 9)) for _ in range(12))

    # 将数字转换为带分隔符的字符串
    secret_key_with_dash = '-'.join(secret_key[i:i+4] for i in range(0, 12, 4))
    return secret_key_with_dash

settings.MEDIA_ROOT，是配置文件的媒体路径

try:
# 照片
robotsphoto = request.FILES.get("robotsphoto", None)

if not robotsphoto:
    return JsonResponse({'data': 'upload ng'})

#提取原始文件的后缀
formatstr = str(robotsphoto.name).split(".")[1]

filepathname = 'uploads\\' + imagename() + "." + formatstr
fileallpath = os.path.join(settings.MEDIA_ROOT, filepathname)
print(fileallpath)
with open(fileallpath, 'ab') as fp:
    for chunk in robotsphoto:
        fp.write(chunk)
return JsonResponse({'data': 'upload success'})

总结：

Django项目的文件上传相对来说比较简单，官方提供了比较详细的文档，有空可以去瞅瞅

如需要批量进行上传，大致原理差不多，可以循环遍历文件，将每一个文件进行相同的操作即可，

在进行上传和保存时，请确定上传的格式和保存的格式一致，以免出现问题，尽量在前端将用户上传的文件格式进行限制，以免出现其他问题，

另外。在进行请求时传输参数，请尽量使用post请求，GET请求如在请求中有中文，在不同系统可能出现不一样的结果，GET请求应该是数字和字母。

我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S7

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S7

登录后参与评论

0 条评论

热度