python Django +Vue实现多文件异步上传

python Django +Vue实现多文件异步上传

刚接触python不久,接到个需求需要多文件上传,在网上找了很多,有讲理论的,有讲实现的,但我花了很长时间,才从这些文章中搞懂这个问题,我们来个直接粗暴的,上代码,部分解释加在代码上

html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页title>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div id="app">    
	<input type="file" multiple="multiple" @change="fileChange" name="myfile">
	<input type="button" @click="upData" value="上传">
div>

<script>
	let app = new Vue({
        el: '#app',
        data: {
            fileList: [],
        },
        methods: {
            fileChange: function (e) {
                this.fileList = e.target.files
            },
            upData:function () {
                let that=this
                let formData=new FormData();//一个模拟表单提交的对象,
                let len=that.fileList.length;
                for(let i=0;i<len;i++){
                    formData.append('myfile',this.fileList[i])
                }
                axios({
                    method:"post",
                    url: "upload/",
                    data:formData,//注意这里不是用prams提交参数
                    headers: {
                     	//文件上传要设置的我就不细说了
                        'Content-Type': 'multipart/form-data;charset=utf-8'
                    },
                }).then((res)=>{
                    console.log(res);
                }).catch(error=>{
                    alert(error);
                });
            },
        },
    })
script>
body>
html>

Django 中urls的

urlpatterns = [
    path('upload/', views.upload),
]

Django 中 views的

def upload(request):
	# 请求方法为PO5T时,进行处理
    if request.method == "POST":  
   	 	# 获取上传的文件,如果没有文件,则默认为None
        myFiles = request.FILES.getlist("myfile", None)  
        if not myFiles:
            return HttpResponse("未接收到文件!")
        for myFile in myFiles:
         	# 打开特定的文件进行二进制的写操作(有更新,无新建)
            destination = open(os.path.join("D:\\upload\\", myFile.name), 'wb+') 
            for chunk in myFile.chunks():  # 分块写入文件
                destination.write(chunk)
            destination.close()
        return HttpResponse("上传成功!")

代码已经完了,有不足之处还请指正

你可能感兴趣的:(python,vue.js,upload,post)