问题七牛如何在文件上传前进行压缩-以图片为例：
首先我查看七牛的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