七牛上传图片使用心得

你的名字 2022-03-15 00:20 226阅读 0赞

使用七牛进行图片、视频的上传，简单又高效。官方javascript-sdk地址：[developer.qiniu.com/kodo/sdk/12…][developer.qiniu.com_kodo_sdk_12]

常用功能有：

1.多图或单图上传

2.限制上传格式、大小

3.上传失败，重新上传

4.上传过程中终止上传

5.上传进度计算

引入qiniu.js后，配置讲解

var uploader = Qiniu.uploader({
        disable_statistics_report: true,
        makeLogFunc: 1,
        runtimes: 'html5,flash,html4',
        browse_button: 'pickimg',
        container: 'btnlist',
        max_file_size: '20mb',
        dragdrop: false,
        chunk_size: '4mb',
        multi_selection: true,
        uptoken_url: '/management/upload/getqiniuuptoken.do',//token获取地址
        uptoken_func:function(file){//如果token获取地址不一致，使用
            var uptoken = "";
            var url = "";
            if(file.type.indexOf("video")>-1 || self.videoType.indexOf(file.name.split('.')[1]) > -1){         // 添加视频token处理
                url = "";
                self.uploader.domain = '';
            }
            if(file.type.indexOf("image")>-1){
                url = "";
                self.uploader.domain = '';
            }
            $.ajax({
                url: url,
                dataType: "json",
                type: "get",
                async: false,
                success: function (data) {
                    uptoken = data.uptoken;
                },
                error: function (a, b) {
    
                }
            });
            return uptoken;
        },
        unique_names: false,
        save_key: false,
        max_retries: 0,                     // 上传失败最大重试次数
        domain: 'http://you2.autoimg.cn/',
        get_new_uptoken: true,
        auto_start: true,//文件选择完毕后自动上传
        log_level: 0,
        init: {
            'FilesAdded': function (up, files) {
                self.processPercent = 0;
                self.uploadImgList ={ids:[],files:[]};
    
                self.uploadImgList.files = files;
    
                // 显示上传进度
                self.showUploadProcess = true;
    
                // 上传的图片数量
                self.uploadImgNum = files.length;
                imgMum = files.length;
    
    
    
                plupload.each(files, function (file) {
                    if(file.type=='image/jpeg'||file.type=='image/jpg'||file.type=='image/png'||file.type=='image/bmp'){
    
                    }else{
                        alert("文件格式不正确，请选择上传jpg、png、bmp格式图片");
                        up.removeFile(file);
                        self.showUploadProcess = false;
                        return false;
                    }
                });
    
            },
            'BeforeUpload': function (up, file) {
    
            },
            'FileUploaded': function (up, file, info) {//单张图片上传成功处理
                if (info.status == "200") {
                    var imgUrl = "http://you2.autoimg.cn/"+JSON.parse(info.response).key;
                    self.uploadImgList.ids.push(imgUrl);
                    imgMum--;
    
                }
                if(imgMum == 0){
                    self.saveImg(self.uploadImgList.ids.join(','));
                }
            },
    
            'UploadComplete':function(up, file, info){
    
            },
            'Error': function (up, err, errTip) {
    
            },
            'Key': function (up, file) {
                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                // 该配置必须要在 unique_names: false , save_key: false 时才生效
                var uuid = utils.uuid();
                var key = "_autohomecar__zhouyouji/" + uuid + ".jpg";
                return key;
            },
            'UploadProgress': function (up, file) {
    
                var files = up.files;
                var uploaded = 0;
                for(var i=0;i<files.length;i++){
    
                    uploaded += files[i].percent;
                }
    
                self.processPercent = parseInt(uploaded/(files.length*100)*100);
    
            }
        }
    });
    复制代码

注意点：

1.实现上传终止，七牛配置中有stop方法，它支持暂停上传，再次开启start上传后会继续上传，并不能实现终止结束，即使删除up中的files，上传一旦开始就无法撤销，所以我的实现方案是利用destroy将实例销毁，销毁后再重新绑定，之前的图片就会终止上传。

2.上传按钮的位置如果有变化（如点击后按钮消失），由于七牛的实现方案是在上传按钮的位置放置了一个div，div里有真正上传使用的input，所以即使将自己的上传按钮隐藏，点击该位置依然会触发上传。建议将真正的上传按钮放置到边缘位置，触发方式采用手动click

3.UploadProgress中可以得到已上传文件的上传进度百分比，如果想得到总的上传进度，需要自己计算下

4.重新上传是在qiniu.js中添加自定义方法retryUploadFile：调用 uploader.retryUploadFile(fileId);

retryUploadFile: function(id){
        var file, count = 0, i;
        this.state = plupload.STARTED;
        // Find first QUEUED file
        if(files) {
            for (i = 0; i < files.length; i++) {
                if (files[i].id == id) {
                    file = files[i];
                    if (this.trigger("BeforeUpload", file)) {
                        file.status = plupload.UPLOADING;
                        this.trigger("UploadFile", file);
                    }
                }
            }
    
            // All files are DONE or FAILED
            //if (count == files.length) {
                if (this.state !== plupload.STOPPED) {
                    this.state = plupload.STOPPED;
                    this.trigger("StateChanged");
                }
                this.trigger("UploadComplete", files);
            //}
        }
    }
    复制代码

[developer.qiniu.com_kodo_sdk_12]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.qiniu.com%2Fkodo%2Fsdk%2F1283%2Fjavascript%234

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 iOS七牛云上传图片

以前上传图片都是通过form表单提交上传文件类型数据，这次的后台有点逗逼用起了第三方，我也是呵呵了，因此找了一下文档，第三方SDK集成我就不多说了，毕竟都是按照人家的步骤来就行

约定不等于承诺〃/ 2023年10月17日 15:23/ 0 赞/ 82 阅读

相关 egg,七牛云上传图片

这是我的service 文件， const Service = require('egg').Service const qiniu = require('q

小鱼儿/ 2022年11月30日 12:43/ 0 赞/ 180 阅读

相关七牛上传base64图片（附js裁剪头像，上传七牛）

代码如下： <div id="myDiv"></div> <script type="text/javascript"> //调用上传

喜欢ヅ旅行/ 2022年06月17日 00:11/ 0 赞/ 267 阅读

相关使用七牛上传图片的demo

七牛是一个很好的第三方的图片服务器,下面介绍一下使用七牛上传图片的demo. 1、直接上代码: UploadDemo.java ---

女爷i/ 2022年05月30日 23:43/ 0 赞/ 241 阅读

相关 html页面上传图片到七牛云。javaweb上传图片到七牛云

目的：使用html页面上传图片到七牛云。（使用了springmvc框架）准备工作： 1、springmvc搭建：[https://blog.csdn.net/

你的名字/ 2022年05月16日 02:06/ 0 赞/ 327 阅读

相关七牛上传图片或视频

<?php namespace App\Controller; use Think\Controller; Vendor('php-qiniu-

墨蓝/ 2022年05月10日 13:50/ 0 赞/ 214 阅读

相关七牛上传图片使用心得

使用七牛进行图片、视频的上传，简单又高效。官方javascript-sdk地址：[developer.qiniu.com/kodo/sdk/12…][developer.qin

你的名字/ 2022年03月15日 00:20/ 0 赞/ 227 阅读

相关 kindeditor编辑器使用七牛云上传图片

问题描述：使用编辑器上传图片在有些电脑上可以，在有些电脑上不可以 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shad

太过爱你忘了你带给我的痛/ 2022年02月13日 16:11/ 0 赞/ 247 阅读

相关 Django七牛云图片上传

Django七牛云图片上传参考文档：七牛云官网： https://www.qiniu.com/ 插件下载地址及使用

超、凢脫俗/ 2021年09月17日 16:18/ 0 赞/ 416 阅读

相关七牛云图片上传

七牛云图片上传 > 可查看七牛云上传图片的SDK from flask import Flask, render_template, request, json

痛定思痛。/ 2021年09月17日 16:08/ 0 赞/ 377 阅读