react-uplod-img是基于Reactantd组件的图片上传组件，支持ossqiniu等服务端自定义签名获取，批量上传、预览、删除、排序等功能需要react版本大于v16.1.0及支持asyncawaitgit地址demo安装npmireact-uplod-img--saveintroduceimportUpImagefrom'react-uplod-img'callconstgetOSSSign=(suffix,width,height,extraParam)=>{constapiServerUrl='https://hp.bncry.cn/util/getAliyunSignature';consturl=`${apiServerUrl}?${[`bizName=${extraParam.bizName}`,`suffix=${suffix}`,`width=${width}`,`height=${height}`,].join('&')}`;returnnewPromise((resolve,reject)=>{fetch(url).then(async(response)=>{constres=awaitresponse.json();constformData=res.data;resolve({key:formData.dirPath，策略：formData.policy，OSSAccessKeyId：formData.OSSAccessKeyId，success_action_status：'200'，回调：formData.callback，签名：formDat一个签名，}）;})})};constossUploadConfig={type:'oss',imageUploadServerHost:'https://hp-file-lf.oss-cn-hangzhou.aliyuncs.com',//图片上传服务地址imageShowServiceHost:'https://hp-file-lf.oss-cn-hangzhou.aliyuncs.com',//图片查看地址前缀totalNum:5,supportSort:true,value:'avatar/2018-10-10/f2b3ace0-cc33-11e8-8ad4-3550e70cc242_220_138.jpg;avatar/2018-10-10/f2b42210-cc33-11e8-8ad4-3550e70cc242_1080_1920.jpg;avatar/2018-10-140/240cc-43550e70cc242_1280_719.jpg'};配置项类型默认值说明typeStringgoss类型目前支持ossqiniuimageUploadServerHostString图片上传服务地址前缀imageShowServiceHostString图片查看服务地址前缀maxSizeNumber2048图片大小限制单位KBtotalNumNumber1图片数量限制supportSortBoolfalse是否支持拖拽排序extraParamObject获取签名getSign方法第四个参数为获取签名时自定义输入参数getSignFunc(suffix,width,height,extraPara)=>{}获取签名MethodPromiseonChangeFunc(values)=>{}图片上传成功时的回调参数为图片的半路径；一个分隔的字符串valueString回显图像的路径一半路径；separatedgetSignsuffiximagesuffixwidthimagewidthheightimageheightextraParam自定义参数width和height参数为组件渲染得到的图片的真实宽高。建议传递给服务端参与签名生成。urlkey可以携带宽高信息，例如/avatar/2018-10-10/f2b3ace0-cc33-11e8-8ad4-3550e70cc242_800_600.jpg图片路径携带宽高信息。后面前端页面图片懒加载时，可以通过链接中的宽高信息进行优化//ossconstgetSign=(suffix,width,height,extraParam)=>{constapiServerUrl='https://hp.bncry.cn/util/getAliyunSignature';consturl=`${apiServerUrl}?${[`bizName=${extraParam.bizName}`,`suffix=${suffix}`,`width=${width}`,`height=${height}`,].join('&')}`;returnnewPromise((resolve,reject)=>{fetch(url).then(async(response)=>{constres=awaitresponse.json();constformData=res.data;resolve({key:formData.dirPath,policy:formData.policy,OSSAccessKeyId:formData.OSSAccessKeyId,success_action_status:'200',回调:formData.callback,签名:formData.signature,});})})};//qiniuconstgetSign=(suffix,width,height,extraParam)=>{constqiniuApiServerUrl='https://hp.bncry.cn/util/getQiniuSignature';consturl=`${qiniuApiServerUrl}?${[`suffix=${suffix}`,`width=${width}`,`height=${height}`,.join('&')}`;returnnewPromise((resolve,reject)=>{fetch(url).then(async(response)=>{constformData=awaitresponse.json();resolve({token:formData.uptoken,});})})};注意事项使用asyncawait的异步处理方式获取签名，需要你的项目支持asyncawait，不支持会报ReferenceError:regeneratorRuntimeisnotdefinedsolutionnpmi--save-devbabel-plugin-transform-runtime在.babelrc文件中添加："plugins":[["transform-runtime",{"helpers":false,"polyfill":false,"regenerator":true,"moduleName":"babel-runtime"}]]
