前端form表单上传图片等信息，python后端接收

前端form表单上传图片等信息，python后端接收。

最近总需要做关于图片上传的东西。一直百度，这次想自己记录一下。

HTML代码：

<form class="box" action="这里写后端接口地址" method="POST" enctype="multipart/form-data">
    <div class="formbox">
        <input type="file" name="img" id="file0" class="select2" multiple>
        <p>添加标题：</p>
        <textarea class="uploadtitle" name="title" id="js-file2"></textarea>
        <p>添加内容：</p>
        <textarea class="uploaddetail" name="content" id="js-file1"></textarea>
        <button id="js-submit" style="display: none;" type="submit">提交</button>
        <p id="js-button">提交</p>
    </div>
</form>

上面input标签的name属性很重要，后端应该是根据这个属性来接收数据。上面隐藏掉提交按钮，用p标签代替是为了判断当用户有信息没填写的时候，不让用户提交。即下面的js代码：

$('#js-button').on('click', function() {
   if($('.uploadtitle').val() == '' || $('.uploaddetail').val() == '' || $('.box2 img').attr('src') == '') {
        alert('请确认所有信息已填写')
    } else {
        $('#js-submit').click()
    }
})

前端要做的事就是这么多。下面是python后端接口代码(后端是公司另一个开发写的，代码我也不太懂)：

class Upload(View):
    def post(self, request):
        """
        上传图片
        :param request:
        :return:
        """
        # data = json.loads(request.body)['data']
        # areas = data.get('areas')
        if request.method == "POST":
            img_file = request.FILES.getlist("img")
            for img in img_file:
                image_path = './media/slideshow/' + img.name
                destination = open(image_path, 'wb')
                for chunk in img.chunks():
                    destination.write(chunk)
                destination.close()
                data = {
                    "image": image_path,
                    "title": request.POST.get('title', None),
                    "content": request.POST.get('content', None),
                    "display": 1,
                    "add_time": time.strftime("%Y-%m-%d %H:%M:%S")
                }
                try:
                    models.SlideshowInfo.objects.create(**data)
                    return HttpResponse("success")
                except Exception as e:
                    print("上次图片出错：", e)
                    return HttpResponse("error")

提交完成后，会默认在新页面显示接口返回值。若想在当前页面显示，并做其他逻辑判断可以引入js文件<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>

然后在js里写入

$(".box").ajaxForm(function(data){
    alert("上传成功" + data);
    //Alert("post success.");
}); //这里.box是form表单的类名

这里就是所有代码了。感觉主要还是后端逻辑，前端就一个表单就好。