django
重新定义模型类定义模型来保存图片的基本信息,包括图片的名字、大小、类型、文件存储路径和创建时间,这里我还定义了一个Md5用来区分图片,防止重复上传相同的图片。更新时间看个人需求,我这里暂时不需要就注释掉了(我主要用来存储文章中的图片的,如果已经存在直接返回路径即可,无需更新文件)。定义完之后记得执行迁移命令,同步至数据库:Python manage.py makemigrations 和 python manage.py migrate。
注意:这里更新时间我用的是CharField而非DateField,原因是使用DateField时时间格式并不是我想要的,通过strftime转换后就成了字符串,所以我直接用CharField来存了。文件路径存储用到的也不是ImageField,而是直接用CharField来存储的。
定义路由为视图配置访问路由,我定义了一个uploadimage,我们只要访问http://127.0.0.1:8000/uploadimage/就可以找到对应的路由了,因为这是POST请求接口,需要携带数据进行接口访问,不然就会报错,这里我们可以通过postman来模拟测试。
定义方法我单独新增了一个文件tools.py来写入以下方法:包括 计算文件的md5、#文件重命名及写入、# 检测文件类型、# 限制文件大小,方便后面在视图中调用。
定义视图 我要实现的功能有以下几点:1.获取文件MD5值,用来区分文件,防止重复上传相同的图片。2.文件大小限制,一般情况下允许上传不大于5M的图片。3.文件类型检测,判断上传文件是否为图片类型文件。4.文件重命名,我们在上传图片的时候经常会有同名的文件,为了更好的区分我们在上传的时候对文件进行重命名操作。5.手动上传图片文件到服务器中。6.将信息存入到数据库中并返回图片地址给前端。接下来我们在视图中引入,先获取前端发来的文件对象,然后计算出文件的MD5,那这个MD5去数据库中匹配,如果存在则直接将对应的图片路径返回给前端,如果没有我们就开始进行写入,写入前我们先对文件大小进行判定,再对文件类型进行判定,如果都满足的话就进行文件重命名和写入操作,最后将文件信息存入到数据库中即可。这里我提取了文件重命名之后的名称、文件类型、文件大小、文件存储路径和文件MD5值,创建时间是自动写入的无需操作。
接口测试通过postman模拟POST请求来测试该接口,我们提交一个文件类型的参数进行POST访问,这里我传了一个文件名为视图桌面(26).jpg的图片文件,传输形式为form-data。下面我们可以看到视图返回的信息有两个,一个是code代码执行成功,另一个是imgurl,这时返回给前端的图片地址,前端拿到这个地址再插入到想显示的地方即可。
前端访问在tinymce富文本中上传图片测试下该功能,将http://127.0.0.1:8000/uploadimage/该接口引入前端,获取imgurl并将imgurl传给success,这样我们就可以在富文本中插入该图片了。
选中富文本中的图片,在Element中我们可以看到对应的标签,在img中可以看到我们后台返回的图片地址。
你也可以拿着这个地址直接在浏览器中访问,直接在地址中输入即可访问该图片。
发现个小问题(好奇葩):在tinymce中复制粘贴时发现的,当我直接复制图片然后在tinymce中粘贴时会提示上传失败,后台也没获取到图片,但是通过截图在粘贴就可以成功上传,如果通过图片查看器复制粘贴也能成功,但同时显示上传失败提示,后台有获取到对应的文件。看来tingymce的复制粘贴还有点小问题,需要重写了!