原生使用七牛云上传实例

首先,下载依赖的js文件:地址,或者前往官网下载sdk在html中引用

var uploadDemo  = null;
initQiniu(token){
	//以下所需的变量请按照自己的需求填入
    uploadDemo = new plupload.Uploader({
        runtimes: 'html5,flash,html4',
        browse_button: 'pickfiles', //这个必须配置,选;择按钮的id
        url: 'http://upload.qiniu.com',//自行查阅自己的七牛云,不同地区这个地址不一样 (例子为华南地区)
        //这是请求七牛云 token的时候的参数,key 可以不写,就会默认返回是hash值
        multipart_params: {
            token: token,
            key:fileNameSave,
        },
        domain: '你的七牛云所在的地址',
        container : document.getElementById('content'),//个人感觉没什么用,可不写
        chunk_size: '8mb', 
        bucket: "qzdcloud-oss-bucket",//命名空间
        // /当值为true时会为每个上传的文件生成一个唯一的文件名,并作为额外的参数post到服务器端,参数明为name,值为生成的文件名。
        // unique_names: true,  
        save_key: true,
        // get_new_uptoken: true,
        // auto_start: true,
        max_retries: 3,
        filters:{
            max_file_size : '500mb',//最大可上传的文件大小
            prevent_duplicates: false
        },
        //下面这些事件一定要在这个init里面配置
        init: {
            // 添加文件
            FilesAdded: function(up, files) {
                // Called when files are added to queue
                plupload.each(files, function(file) {
                    fileName = files[0].name
                    window.setContent(fileName)
                });
                uploadDemo.start();
            },
            // 上传之前
            BeforeUpload: function(up, file) {
                // console.log('[BeforeUpload]', 'File: ', file);
                //设置参数
                //plupload 提供了四个控制请求的参数,包括 headers、multipart、multipart_params、max_retries
            },
            // 上传进度
            UploadProgress:function(up,files){ 
                //进了这里就直接失败了
                window.setColorWidth(files.percent);
            },
            FileUploaded:function(up,file){
                updatePcbMet(fileNameSave);
            },
            Error : function(up, err) {
                alert("此文件上传失败!");
            }
        },
    });
    uploadDemo.init();//开始初始化
}
发布了50 篇原创文章 · 获赞 4 · 访问量 1281

猜你喜欢

转载自blog.csdn.net/weixin_43910427/article/details/104429266