如何压缩glb文件_七牛如何在文件上传前进行压缩-以图片为例

问题七牛如何在文件上传前进行压缩-以图片为例:

首先我查看七牛的api并没有文件上传前的压缩处理,我就想在七牛文件上传前进行处理用的是

lrz对图片进行处理,代码如下

import React from “react”;

import ReactDOM from “react-dom”;

import $ from “jquery”;

import util from “../common/util.js”;

import plupload from “plupload”;

import QiniuJsSDK from “QiniuJsSDK”;

import Qiniu from “Qiniu”;

import lrz from “lrz”;

var uploadImg=require(“../common/add_file.png”);

var UploadImage = React.createClass({

getInitialState:function(){

return {

show:false,

count:0,

upToken:'',

diffArr:[]

};

},

useAjax:function(url,data){

var _this=this;

$.ajax({

url:url,

data:data,

dataType:"json",

//type:"",

success:function(data){

if(data.success){

console.log(data.data);

this.setState({upToken:data.data});

_this.uploaderInit(_this.props.picId,_this.props.filters);

}else{

alert("无法获取上传凭证");

}

}.bind(this),

error:function(err){

console.error(err.toString());

}.bind(this)

});

},

LoaderArgu:function(id,filters,_this){

this.browse_button=id;

this.runtimes= 'html5,flash,html4',      // 上传模式,依次退化

//browse_button: 'pickfiles',         // 上传选择的点选按钮,**必需**

// 在初始化时,uptoken, uptoken_url, uptoken_func 三个参数中必须有一个被设置

// 切如果提供了多个,其优先级为 uptoken > uptoken_url > uptoken_func

// 其中 uptoken 是直接提供上传凭证,uptoken_url 是提供了获取上传凭证的地址,如果需要定制获取 uptoken 的过程则可以设置 uptoken_func

this.uptoken =_this.state.upToken, // uptoken 是上传凭证,由其他程序生成

// uptoken_url: '/uptoken',         // Ajax 请求 uptoken 的 Url,**强烈建议设置**(服务端提供)

//this.uptoken_func=function(file){    // 在需要获取 uptoken 时,该方法会被调用

//  _this.useAjax("http://101.200.186.44:8080/mobile/qiNiu/getUpToken");

// },

this.get_new_uptoken=false,                // 设置上传文件的时候是否每次都重新获取新的 uptoken

// downtoken_url: '/downtoken',

// Ajax请求downToken的Url,私有空间时使用,JS-SDK 将向该地址POST文件的key和domain,服务端返回的JSON必须包含`url`字段,`url`值为该文件的下载地址

// unique_names: true,              // 默认 false,key 为文件名。若开启该选项,JS-SDK 会为每个文件自动生成key(文件名)

// save_key: true,                  // 默认 false。若在服务端生成 uptoken 的上传策略中指定了 `sava_key`,则开启,SDK在前端将不对key进行任何处理

this.domain='http://7xrula.com1.z0.glb.clouddn.com/',     // bucket 域名,下载资源时用到,**必需**

//this.container='container',             // 上传区域 DOM ID,默认是 browser_button 的父元素,

this.max_file_size='100mb',             // 最大文件体积限制

this.flash_swf_url='path/of/plupload/Moxie.swf',  //引入 flash,相对路径

this.max_retries= 3,                     // 上传失败最大重试次数

this.dragdrop=true,                     // 开启可拖曳上传

this.drop_element='container',          // 拖曳上传区域元素的 ID,拖曳文件或文件夹后可触发上传

this.chunk_size='4mb',                  // 分块上传时,每块的体积

this.auto_start=true,

this.filters=filters,

this.init={

'FilesAdded': function(up, files) {

plupload.each(files, function(file) {

// 文件添加进队列后,处理相关的事情

console.log("1文件添加进队列");

$(".loadMask").attr("class","loadMask");

$(".centerLoad").attr("class","centerLoad");

lrz(file, {quality:0.1}).then(function(){

console.log("压缩成功");

}).catch(function () {

// 压缩失败会执行

alert("头像图片失败!");

})

});

},

'BeforeUpload': function(up, file) {

// 每个文件上传前,处理相关的事情

console.log("每个文件上传前");

//console.log("文件1:" + file);

//console.log("文件2:" + event.target.files[0]);

lrz(file, {quality:0.1}).then(function(){

console.log("压缩成功");

}).catch(function () {

// 压缩失败会执行

alert("头像图片失败!");

})

},

'UploadProgress': function(up, file) {

// 每个文件上传时,处理相关的事情

console.log("文件上传时");

},

'FileUploaded': function(up, file, info) {

// 每个文件上传成功后,处理相关的事情

// 其中 info 是文件上传成功后,服务端返回的json,形式如

// {

//    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",

//    "key": "gogopher.jpg"

//  }

// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

var domain = up.getOption('domain');//域名

var res = JSON.parse(info);

var sourceLink = domain + res.key; //获取上传成功后的文件的Url

console.log(_this.state.upToken+"上传成功后 "+sourceLink);

_this.props.onUploadSuccess(sourceLink+"+"+file.name);

},

'Error': function(up, err, errTip) {

//上传出错时,处理相关的事情

if (err.message == 'File extension error.') { alert(111)}

//window.confirm("1111");

return false;

//console.log("上传出错时"+err);

//_this.props.onUploadeError(err+_this.state.count);

},

'UploadComplete': function() {

//队列文件处理完毕后,处理相关的事情

console.log("队列文件处理完毕后");

$(".loadMask").attr("class","loadMask hidden");

$(".centerLoad").attr("class","centerLoad hidden");

},

'Key': function(up, file) {

// 若想在前端对每个文件的key进行个性化处理,可以配置该函数

// 该配置必须要在 unique_names: false , save_key: false 时才生效

var key = "pubFile/"+new Date().getTime();

// do something with key here

return key

}

}

},

uploaderInit:function(id,filters){

var QiniuNew=new QiniuJsSDK(),

filter;

if(id=="pickfiles-picture"){

filter={ mime_types: [{ title: " ", extensions: "jpeg,jpg,JPG,JPEG,PNG,png" }] };

QiniuNew.uploader(new this.LoaderArgu(id,filter,this));

setTimeout(function(){

$("#pickfiles-picture").siblings().last().children().attr("accept","image/*");

$("#pickfiles-picture").siblings().last().children().removeAttr("multiple");

},1000)

}

},

componentDidMount:function(){

this.useAjax(util.URL+"/mobile/qiNiu/getUpToken");

},

render:function(){

var uploadWord;

uploadWord=this.props.picId=="pickfiles-picture"?"选择图片":"选择音乐";

return (

<div className="picFrame" id={this.props.picId}>

<img src={uploadImg} />

<span>{uploadWord}</span>

</div>

);

}

});

module.exports=UploadImage;

浏览器端的错误提示:

1:Failed to execute ‘createObjectURL’ on ‘URL’: No function was found that matched the signature provided.

执行失败的createobjecturl”在“URL”功能:没有发现匹配的签名设置。

大神有求指导,或者有更简单的方法-在上传七牛前对文件进行处理且不与七牛冲突???

看了半天,这个代码应该不全吧

你具体看下这个里面怎么做的

http://think2011.net/localResizeIMG/test/server.js?v=c8aaa97

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值