微信公众号开发Django 图片处理
title: 微信公众号开发Django-图片处理 date: 2018-06-21 17:03:39 tags: [微信公众号,Django]
微信公众号开发,图片处理部分
上篇文章已经获取了wx的接口权限 本来想直接使用wx的图像接口,但是后来发现处理js动作有点小麻烦 还有些莫名的错误,就选择了好用的weui.js 挺好用~
(为了少走弯路,建议直接用weui.js)
首先我们设置后端代码接收前端post,在上篇文章已经提到
# Image字段
class Image(models.Model):file = models.ImageField('图片', upload_to=image_filename, blank=True)name = models.CharField('文件名', blank=True, null=True, max_length=256)uploaded_by = models.ForeignKey(FansProfile, verbose_name='上传者', on_delete=models.CASCADE)created_time = models.DateTimeField('创建时间', auto_now_add=True)last_modify_time = models.DateTimeField('最后修改时间', auto_now=True)class activity(View):def post(self,request,*args, **kwargs):request_type = request.POST.get('type')if not request_type:pass # 处理ticket获取elif request_type == 'image/jpeg':files = request.FILES.getlist('fileVal')[0]filename = request.POST.dict()['name']uploader_id = request.COOKIES.get('fanid','')check_id = FansProfile.objects.filter(id=uploader_id).first()if not check_id:return HttpResponseRedirect(web_get_code+'snsapi_base#wechat_redirect')post_image = Image(file = files) # Image数据库模型post_image.uploaded_by = check_idpost_image.name = filename.split('.')[:-1][0]post_image.save()return HttpResponse(json.dumps({'statue':True}),content_type="application/json")
复制代码
然后来到前端,下面是简单的实现 就是weui.js文档和演示html的堆砌 详情点击weui.js-docs weui.js预览
{% load static %}
<script>$(document).ready(function () {var uploadCountDom = document.getElementById("uploadCount")var url = location.href.split('#')[0];var uploadCount = 0,uploadList = [];$('#uploaderInput').on("click", function (e) {weui.uploader('#uploader', {url: url,auto: false,type: 'file',fileVal: 'fileVal',compress: {width: 1600,height: 1600,quality: .8},onBeforeQueued: function (files) {// `this` 是轮询到的文件, `files` 是所有文件if (["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0) {weui.alert('请上传图片');return false; // 阻止文件添加}if (this.size > 10 * 1024 * 1024) {weui.alert('请上传不超过10M的图片');return false;}if (files.length > 5) { // 防止一下子选择过多文件weui.alert('最多只能上传5张图片,请重新选择');return false;}if (uploadCount + 1 > 5) {weui.alert('最多只能上传5张图片');return false;}++uploadCount;uploadCountDom.innerHTML = uploadCount// return true; // 阻止默认行为,不插入预览图的框架},onQueued: function () {uploadList.push(this);console.log(this);// console.log(this.status); // 文件的状态:'ready', 'progress', 'success', 'fail'// console.log(this.base64); // 如果是base64上传,file.base64可以获得文件的base64// this.upload(); // 如果是手动上传,这里可以通过调用upload来实现;也可以用它来实现重传。// this.stop(); // 中断上传// return true; // 阻止默认行为,不显示预览图的图像},onBeforeSend: function (data, headers) {console.log(this, data, headers);// $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数$.extend(headers, { 'X-CSRFToken': '{{ csrf_token }}' }); // 可以扩展此对象来控制上传头部// return false; // 阻止文件上传},onProgress: function (procent) {console.log(this, procent);// return true; // 阻止默认行为,不使用默认的进度显示},onSuccess: function (ret) {console.log(this, ret);// return true; // 阻止默认行为,不使用默认的成功态},onError: function (err) {console.log(this, err);// return true; // 阻止默认行为,不使用默认的失败态}});})// 缩略图预览document.querySelector('#uploaderFiles').addEventListener('click', function (e) {var target = e.target;while (!target.classList.contains('weui-uploader__file') && target) {target = target.parentNode;}if (!target) return;var url = target.getAttribute('style') || '';var id = target.getAttribute('data-id');if (url) {url = url.match(/url\((.*?)\)/)[1].replace(/"/g, '');}var gallery = weui.gallery(url, {className: 'custom-name',onDelete: function onDelete() {weui.confirm('确定删除该图片?', function () {--uploadCount;uploadCountDom.innerHTML = uploadCount;for (var i = 0, len = uploadList.length; i < len; ++i) {var file = uploadList[i];if (file.id == id) {file.stop();break;}}target.remove();gallery.hide();});}});});document.querySelector('#images-del').addEventListener('click', function () {options.onDelete.call(this, url);});document.querySelector('#confirmBtn').addEventListener('click', function () {weui.confirm('确定提交吗?', function () {uploadList.forEach(function (file) {file.upload();});console.log('yes');}, function () {console.log('no');}, {title: '提交确认'});});});
</script><div class="weui-gallery"><span class="weui-gallery__img"></span><div class="weui-gallery__opr"><a href="javascript:" class="weui-gallery__del"><i class="weui-icon-delete weui-icon_gallery-delete" id="images-del"></i></a></div>
</div>
<div class="weui-cells weui-cells_form" id="uploader"><div class="weui-cell"><div class="weui-cell__bd"><div class="weui-uploader"><div class="weui-uploader__hd"><p class="weui-uploader__title">图片上传</p><div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div></div><div class="weui-uploader__bd"><ul class="weui-uploader__files" id="uploaderFiles"></ul><div class="weui-uploader__input-box"><input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" capture="camera" multiple="" /></div></div></div></div></div>
</div>
<div class="weui-btn-area"><a class="weui-btn weui-btn_primary" href="javascript:" id="confirmBtn">确定</a>
</div>
复制代码
转载于:https://juejin.im/post/5b2c85096fb9a00e7572d4cf
微信公众号开发Django 图片处理相关推荐
- 微信公众号开发接收图片消息,获取用户发送图片的media_id
现在的手机都有拍照功能, 而且人们拍完照后, 喜欢跟朋友分享. 微信公众号也提供了一个功能, 允许你的粉丝在后台回复图片, 你可以通过公众平台提供的api接口, 获取到图片media_id, 然后把图 ...
- php 微信公众号 修改图片尺寸_php微信公众号开发之图片回复
本文实例为大家分享了php微信公众号开发之图片回复的具体代码,供大家参考,具体内容如下 图片回复 随机函数: rand(1,10) 核心代码: $tyep= $postObj->MsgType; ...
- 微信公众号开发-----实现模板、图文、文本、音乐、图片推送
本篇文章实现模板.图文.文本.音乐.图片推送,前提是已经搭建了微信开发环境.读完本文后,实现的主要效果如下 在测试账号中配置模板 登录测试公众号/正式公众号(认证后的服务号),测试公众号:模板消息接口 ...
- 微信公众 mysql回复图片_微信公众号开发之微信公共平台消息回复类实例
本文实例讲述了微信公众号开发之微信公共平台消息回复类.分享给大家供大家参考.具体如下: 微信公众号开发代码我在网上看到了有不少,其实都是大同小义了都是参考官方给出的demo文件进行修改的,这里就给各位 ...
- 实例:用C#.NET手把手教你做微信公众号开发(4)--获取普通access_token、jsapi的方法;用MediaId获取微信服务器图片
一.access_token概念 这里在后续几篇处理不同的普通消息文章前插播一个适用于整个微信公众号开发的公共类QinMingWeixinContainer,用于获取普通access_token和js ...
- 微信公众号开发《四》调用微信JS-SDK实现上传手机图片到服务器
在这粘贴上三篇博文链接,方便大家查阅互相学习: 微信公众号开发<一>OAuth2.0网页授权认证获取用户的详细信息,实现自动登陆 微信公众号开发<二>发送模板消息实现消息业务实 ...
- 微信公众号开发《四》使用微信JS-SDK实现手机图片上传,支持压缩、预览。并下载图片到自身服务器
在这粘贴上三篇博文链接,方便大家查阅互相学习: 微信公众号开发<一>OAuth2.0网页授权认证获取用户的详细信息,实现自动登陆 微信公众号开发<二>发送模板消息实现消息业务实 ...
- 微信公众号开发--图文消息发送不显示图片的问题
使用微信公众号接口实现图文消息推送,遇到问题,不显示图片,且content内容中有英文双引号也不行 1.微信不允许有外链的图片,所以会自动过滤 2."双引号格式问题. 前端把双引号传给后端后 ...
- JAVA微信公众号开发第8篇JSSDK图片上传预览
简介 博主微信JSSDK&图片上传预览基于微信分享做拓展,所以一些配置操作请点击查阅JAVA微信公众号开发第7篇JSSDK&微信分享博文 页面 <html><head ...
最新文章
- Redis 日志篇:无畏宕机快速恢复的杀手锏
- 注解报错_Java中的注解使用:全面性的总结一下
- HTML5 placeholder在低版本浏览器的解决方法
- 【Android 逆向】Dalvik 函数抽取加壳 ( Dalvik 下的函数指令抽取与恢复 | dex 函数指令恢复时机点 | 类加载流程 : 加载、链接、初始化 )
- 在想要放弃的时候想想是什么在支撑着你走到了这一步。
- Linux环境变量的修改(永久,暂时)
- linux /etc/shadow 文本结构
- python排序-堆排序
- 4年猎洞赚百万美金:谈谈我的入门和成功经验
- VS2010-MFC(MFC常用类:MFC异常处理)
- js/jquery禁止页面回退
- Java之美[从菜鸟到高手演变]之设计模式四
- 一个查看Access数据库密码的工具
- java视频通话_Java使用WebSocket和WebRTC视频通话
- PDF虚拟打印机是如何打印文件的
- 638-字符串模式匹配-KMP算法
- 1553B总线基础知识
- OpenFOAM 张量运算
- java淡蓝色怎么表示_最淡的蓝是什么颜色(淡蓝色配什么颜色好看)
- file创建文件失败的问题