您的位置:首页 > Web前端 > React

WebUploader文件上传(react),带参数

2017-12-06 15:36 337 查看
1,导入uploader.swf;webuploader.css;webuploader.nolog.min.js

2,在生命周期中写入

componentDidMount(){
var _this=this;
var $picture =$(".banner-pic");
this._uploader = WebUploader.create({
//自动上传
//auto: true,
//        disableGlobalDnd: true,
// swf文件路径
swf:AppConf.contextPath+'lib/Uploader.swf',
// 文件接收服务端。
server: xxxxxx
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: {
id:'#ban_uploader',
multiple:false
},

accept: {
title: 'Images',
extensions: 'jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png,image/bmp'
},
headers: {'Authorization': AccessToken},
//上传并发数
threads:1,
//{int} [可选] [默认值:undefined] 验证文件总数量, 超出则不允许加入队列
fileNumLimit:1,
//{int} [可选] [默认值:undefined] 验证单个文件大小是否超出限制, 超出则不允许加入队列。
fileSizeLimit: 2 * 1024 * 1024,    // 总共的最大限制 limitSize M
fileSingleSizeLimit: 2 * 1024 * 1024 ,   // 单文件的最大限制 limitSize M
// fileSingleSizeLimit:1024,
method:'POST',
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: false,
duplicate :true
});
this._uploader.on( 'beforeFileQueued', function() {
_this.setState({
errshow:false,
errtext:''
});
var fi=_this._uploader.getFiles();
if(fi.length) {
_this._uploader.removeFile(fi[0] ,true);
_this._uploader.reset();
}
$(".banner-pic").find('img').remove();
});
// 当有文件添加进来的时候
this._uploader.on('fileQueued', function (file) {
_this.setState({
errshow:false,
errtext:''
});
//pick放置图片位置
var $img = $('<img class="picture-in">');
$picture.append( $img );
//var  $img = $picture.find('img');
// 创建缩略图
_this._uploader.makeThumb(file, function (error, src) {
if (error) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr('src', src);
});
});
//清除过程中的报错
this._uploader.on( 'uploadStart', function() {
_this.setState({
errshow:false,
errtext:''
});
});
this._uploader.on( 'uploadProgress', function(){
_this.setState({
errshow:false,
errtext:''
});
});
// 文件上传成功。
this._uploader.on( 'uploadSuccess', function( file ,res) {
if(res.code==200){
_this.setState({
errshow:false,
errtext:''
});
if(_this.state.type===1) {
_this.setState({
saveId: res.data.bannerId
});
_this.bannerUp();
}else{
_this.canclemsg()
_this.setState({
saveId: res.data.bannerId
});
}
}else{
_this.setState({
errshow:true,
errtext:'上传图片失败!'
});
}
});
this._uploader.on("uploadError", function (type) {
if (type == "Q_TYPE_DENIED") {
_this.setState({
errshow:true,
errtext:'请上传JPG、PNG、GIF、BMP格式文件!'
});
} else if (type == "Q_EXCEED_SIZE_LIMIT") {
_this.setState({
errshow:true,
errtext:'文件大小不能超过2M!'
});
}else {
_this.setState({
errshow:true,
errtext:'上传图片失败!'
});
}
});
}


3,在function中传入参数

saveBuild(){
var param = Object.assign({}, {bannerName: this.state.bannerName, link: this.state.link,color:this.state.color});
this._uploader.option('formData', param);
this._uploader.upload();

if($(".banner-pic").find('img')){
this.setState({
errshow:true,
errtext:'请上传图片!'
});
}else{
this.setState({
errshow:false,
errtext:''
});
}
}


4,清除图片

$(".banner-pic").find('img').remove();
var fil=this._uploader.getFiles();
console.log(fil);
if(fil.length) {
this._uploader.removeFile(fil[0] ,true);
this._uploader.reset();
}


5,html

<div className="banner-pic">
<div className="uploder-box">
<div id="ban_uploader">上传图片</div>
</div>
</div>
<div className={"error-input"} >{this.state.errtext}</div>
<div className="banner-log"onClick={this.saveBuild} >保存</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息