layui+python 使用传图功能

最新推荐文章于 2024-09-13 21:30:00 发布

崔大卫c

最新推荐文章于 2024-09-13 21:30:00 发布

阅读量1k

点赞数 2

分类专栏： layui

本文链接：https://blog.csdn.net/cuiwail/article/details/110390115

版权

layui python

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

layui+python 使用传图功能

写layui+python传图之前在网上查了资料，python+java的居多，后面自己摸索出来了其实方法比较简单，分享一下，希望能帮到各位。

前端界面

在这里插入图片描述

html+js

前端直接引用layui插件，改成本地js路径，

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>上传图片</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/lib/layui-v2.5.6/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>常规使用：普通图片上传</legend>
</fieldset>
 {% csrf_token %}
<div class="layui-upload">
  <button type="button" class="layui-btn" id="test1" >上传图片</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo1" style="width: 100px;height: 100px">
    <p id="demoText"></p>
  </div>
</div> 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>选完文件后不自动上传</legend>
</fieldset>
 
<div class="layui-upload">
  <button type="button" class="layui-btn layui-btn-normal" id="test8">选择图片</button>
  <button type="button" class="layui-btn" id="test9">开始上传</button>
</div>
<script src="/static/lib/layui-v2.5.6/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  var csrfToken = $("[name='csrfmiddlewaretoken']").val();
  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '/patientPicture/' //改成您自己的上传接口
    , data: {"csrfmiddlewaretoken": csrfToken }
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
     alert(res)
      //如果上传失败
      if(res.data=="success"){
        return layer.msg('上传成功！');
      }
      //上传成功
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });
  //选完文件后不自动上传
  upload.render({
    elem: '#test8'
    ,url: '/patientPicture/' //改成您自己的上传接口
     , data: {"csrfmiddlewaretoken": csrfToken }
    ,auto: false
    //,accept: 'file'
    //,multiple: true
    ,bindAction: '#test9'
    ,done: function(res){
      layer.msg('上传成功');
      console.log(res)
    }
  });  
});
</script>
</body>
</html>

后台

def patientPicture(req):
    print(req.FILES)
    print(req.POST)
    if req.POST:
        files = req.FILES.getlist('file')
        print("files",files)       
        for f in files:             
             dest= open('ekrehab/ekrehab/ekrehabnt/media/img/' + f.name,'wb+')       
             for chunk in f.chunks():         
                  dest.write(chunk)      
             dest.close()   
        data={"code": 0,"msg": "","data":"success"} 
        return JsonResponse(data,safe=False)
    else:
        return render(req,'organ/ProjectManagement/patientPicture.html')

在这里插入图片描述

layui从前台传来的是“MultiValueDict: {‘file’: [<InMemoryUploadedFile: 1.jpg (image/jpeg)>]}”，是批量上传的，django 里面上传文件默认只处理单个文件上传，批量上传的时候request.FILES 的类型为 MultiValueDict，这种字典类是特殊定义的，要取得list 需要调用 getlist 方法。
单个传图接收：file= req.FILES[‘file’]

链接: layui文件上传.