微信公衆號開發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_id
            post_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>