前端代码
在前端HTML,我需要一个上传控件,类型声明是文件。type="file",并且设置格式为JPEG ,accept="image/jpeg"
注意
需要在form 表单中增加属性 enctype="multipart/form-data"使用二进制传输文件
代码语言:html复制 <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",
代码语言:javascript复制 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视图函数
大致流程,获取到文件,使用二进制读取并保存文件,为保证图片的一致性,我们一般要使用随机数字作为图片名称
图片名称随机代码,
代码语言:python代码运行次数:0复制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,是配置文件的媒体路径
代码语言:python代码运行次数:0复制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腾讯技术创作特训营最新征文,快来和我瓜分大奖!