Django集成layui 的 layedit 之图片上传接口
# a.html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
<script src="/static/layui/layui.js"></script>
</head>
<body>
<div>
<form action="/index2/" method="POST" enctype="multipart/form‐data">
{% csrf_token%}
<textarea name="content" id="demo" style="display: none"></textarea>
<input type="submit" class="layui‐btn">
</form>
</div>
<script>
layui.use('layedit', function(){
var layedit=layui.layedit;
layedit.set({
// 上传图片
uploadImage:{
url:'/index1/',
accept:'image',
acceptMine:'image/*',
exts:'jpg|png|gif|bmp',
size:'10240'
},
// 代码设置
codeConfig:{
hide: true
}
})
layedit.build("demo");
})
</script>
</body>
</html>
# settings.py MEDIA_URL='/files/'
MEDIA_ROOT=os.path.join(BASE_DIR,'files')
# urls.py from django.conf.urls.static import static
from django.conf import settings urlpatterns += static('/files/',document_root=settings.MEDIA_ROOT)
# views.py from django.views.decorators.csrf import csrf_exempt @csrf_exempt
def index1(request):
id=request.FILES.get('file') # filename='201907031819001'+id.name
filename=id.name
f=open('files/'+filename,'wb')
for i in id :
f.write(i)
f.close() dicts = {
"code": 0,
"msg": "ok",
"data": {
"src": "files/" + filename,
"title": filename
}
}
return JsonResponse(dicts)
Django集成layui 的 layedit 之图片上传接口的更多相关文章
- Asp.NetCoreWebApi图片上传接口(二)集成IdentityServer4授权访问(附源码)
写在前面 本文地址:http://www.cnblogs.com/yilezhu/p/9315644.html 作者:yilezhu 上一篇关于Asp.Net Core Web Api图片上传的文章使 ...
- springMVC框架下——通用接口之图片上传接口
我所想要的图片上传接口是指服务器端在完成图片上传后,返回一个可访问的图片地址. spring mvc框架下图片上传非常简单,如下 @RequestMapping(value="/upload ...
- django中博客后台将图片上传作为用户头像
添加上传目录 # 如果不添加上传目录,仍然可以上传成功,默认为project目录,如果models.py定义了upload_to="目录名称",则会上传到"project ...
- layedit图片上传接口案列
html部分 <divclass="layui-form-item"> <labelfor="tname"class="layui- ...
- VS2019 开发Django(六)------Admin中图片上传
导航:VS2019开发Django系列 该篇继续完善在Django的管理界面上传图片,因为LazyOrders小程序中菜单需要展示图片,而不是一个文本路径,所以我们还需要继续改造一下. 1)安装pil ...
- thinkphp5图片上传接口
public function avatarUpload() { $file = request()->file('file'); $filePath = 'avatar'; $width = ...
- layui 富文本 图片上传 后端PHP接口
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/ ...
- asp.net core 如何集成kindeditor并实现图片上传功能
准备工作 1.visual studio 2015 update3开发环境 2.net core 1.0.1 及以上版本 目录 新建asp.net core web项目 下载kindeditor ...
- django 发帖时碰到的图片上传
所用编辑器 [wangEditor.js] 图片上传接口 '/edit/image/' 返回内容 参照 https://www.kancloud.cn/wangfupeng/wangeditor3/ ...
- Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程
Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...
随机推荐
- yolo7检测学习Bubbliiiing的视频有感——(1)no model named 'cv2'
我一直以来也是喜欢用vscode,就跟随B导安装了vscode 下载完B导提供的代码后如果想直接跟着视频B导的操作运行predict.py文件是不可能的,需要按照readme文档中的所有提示按照步骤放 ...
- python使用selenium适配谷歌浏览器插件, chromedriver与chrome各版本及下载地址
python selenium使用,需要谷歌chromedriver.exe插件 chromedriver.exe插件是放在python的安装目录下(亲测,其它的都不对) 以下是chromedrive ...
- tmux使用--同步多终端输入
最近一直需要同时操作多个远程机器,就简单学习了下tmux的使用.tmux(terminal multiplexer)是终端复用神器.对多个窗格同时使用特别好用,同步操作多台机器特别方便. tmux安装 ...
- shell脚本中将 IFS (Internal Field Separator 内部字段分隔符)替换为换行符
将 IFS 中的空白符(换行.制表符.空格)修改为仅包含换行 IFS 是shell中的内部变量,在使用 for var in var_list;do use $var do something don ...
- 基于stm32H730的解决方案开发之SD卡的读写调试
一 概述 在嵌入式小系统领域,SD卡存储是一个非常重要的功能.可从难度上,它又是非常难的.因为它涉及到两个大的功能点,一个是文件系统,这个难度非一般.另外一个是sd卡的底层驱动.涉及到的接口多,所以也 ...
- 为aws中国配置docker镜像加速
在AWS中国,docker镜像基本无法拉取,更换国内镜像是必须的. 修改docker配置文件 sudo vi /etc/sysconfig/docker 找到OPTIONS参数,在后面加上" ...
- jenkins批量复制view中所有job
需要将jenkins中某一个view中的所有job都复制到另外一个view中,一个一个复制有点蛋疼,所以查询了一下资料,使用groovy scripts 来实现这个功能 新建view 打开系统管理 - ...
- Tomcat异常之 Exception loading sessions from persistent storage解决方案
启动项目时报以下异常 严重: Exception loading sessions from persistent storage java.io.EOFException 遇到上述异常,删除Tomc ...
- 毕设系列之JrtpLib H264(裸视频数据) 实时视频传输(发送与接受)
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- UE干货| UE虚幻引擎调试神器—控件反射器
一.打开控件反射器 可以通过窗口→开发者工具→控件反射器 打开: 也可以在umg编辑器上方控件反射器打开. 二.UE控件反射器使用方法 运行项目后,点击控件反射器的"选择可测试命中控件&qu ...