【JS/Django】上传下载文件以及转换为URL

需求

前端向后端传递数据，后端接收到数据后将其进行处理，然后返回给前端，前端将其显示在img标签上或者下载下来。

简化一下就是
前端向后端请求–>

然后将得到的响应数据转换为URL，不再依赖后端。

实施

前端

主要

使用XMLHttpRequest();对象进行AJAX异步请求。具体他是干什么不再过多介绍，主要说下在此种情况下如何使用。

let xhr = new XMLHttpRequest()
xhr.open('POST', '/path/to/api/', true)//第三个参数：是否采用异步传输
xhr.responseType = 'blob' //响应格式为blob

xhr.onload = function (e) {
	if (this.status === 200) {
		// 将数据以blob格式获取到前端
		let blob = this.response;
		let u = URL.createObjectURL(blob)//将blob转化为blob:xxxxxxx格式的URL，供前端使用
	}
}
xhr.send(your_data)//开始请求

以上代码实现了：

• POST
• 异步请求
• 发送数据到后端
• 以Blob格式接收后端传过来的数据
• 将Blob的数据转化为前端可用的URL

此时就可以将转换后的URL：let u = URL.createObjectURL(blob)，引用到各个地方。
比如可以用于img的src上：

$('#IMAGE_ID').attr('src', u) //基于jQuery实现，将ID为IMAGE_ID的img标签的src置为u

其他

可以使用let form_data = new FormData()来创建一个form表单进行数据传输，具体使用如下：

form_data.append('name1', String_Or_BLob_Data1)
form_data.append('name2', String_Or_BLob_Data2);
form_data.append('name3', String_Or_BLob_Data3);
form_data.append('name4', String_Or_BLob_Data4);
form_data.append('csrfmiddlewaretoken', csrf_key)//针对Django

然后

xhr.send(form_data)//开始请求

关于如何获取crsf_key在这篇文章中查看。

后端

主要

后端采用Django实现。
如果前端发送的既有文件、Blob又有字符串，在后端可分别使用

request.POST[name]//正儿八经的字符串数据
request.FILES.get(name)//歪儿玖经的文件数据

如果拿到的是字符串数据，那甭说了，想咋处理就咋处理，玩弄其于股掌之中。
如果拿到的是文件、Blob数据，诶？这就有的说了，可以将其写入到file-like对象中，比如file、BytesIO、StringIO等

'''BytesIO'''
with BytesIO() as f:
    for chunk in obj.chunks():
        f.write(chunk)
    f.seek(0)

'''File'''
with open('path/to/file', 'w') as f:
    for chunk in obj.chunks():
        f.write(chunk)

接下来可以将拿到的file-like对象进行一些处理，最后将结果给前端响应，如果是字符串格式的响应数据，可以直接发送

return HttpResponse('Something you wanna send to you front-end')

如果是BytesIO数据：

return HttpResponse(obj.getvalue())

如果是file数据

return HttpResponse(obj.read())