react-weui组件的运用之上传图片控件的用法及input上传图片

第一步：连接UI查找官方文档；链接：https://weui.github.io/react-weui/docs/#/react-weui/docs/page/1/articles/12；

第二步：安装react-weui

 

npm i --save weui react-weui

第二步引入reactweui控件包

 

import {Page, Gallery, GalleryDelete, Uploader, Form, Cell, CellBody } from 'react-weui'

 

import 'weui'; import 'react-weui/build/packages/react-weui.css'(样式包的引入是必备的) 不然就无法达到预期的效果

第三步移入代码，设置参数； 3.1初始化初始状态值

 

this.state = { gallery: false, demoFiles : [ { url:""//上传图片的本地路径 } ] }

3.2引入gallery组件，是上传必须要有的一个组件

renderGallery(){ if(!this.state.gallery) return false; let srcs = this.state.demoFiles.map(file=>file.url) return ( <Gallery src={srcs} show defaultIndex={this.state.gallery.id} onClick={ e=> { console.log('删除');//开启删除接口 //avoid click background item e.preventDefault() e.stopPropagation(); this.setState({gallery: false}) }} > <GalleryDelete onClick={ (e, id)=> { this.setState({ demoFiles: this.state.demoFiles.filter((e,i)=>i != id), gallery: this.state.demoFiles.length <= 1 ? true : false }) }} /> </Gallery> ) }

3.3关键点引入Uploader组件；

 

render(){ return( <Page className="cell" title="上传图片" subTitle="上传图片"> { this.renderGallery() } <Form> <Cell> <CellBody> <Uploader title="图片上传" maxCount={10} files={this.state.demoFiles} onError={msg => alert(msg)} onChange={(file,e) => { this.sendUpajax(file,e) }} onFileClick={ (e, file, i) => { console.log('file click 删除图片', file, i) this.setState({ gallery: { url: file.url, id: i } }) } } lang={{ maxError: maxCount => `最大上传${maxCount} 张图片` }} /> </CellBody> </Cell> </Form> </Page> ) }

可以设置的参数：

maxCount

表示上传最多能上传多少张图片

 

demoFiles

设置上传图片的本地路径

maxWidth

设置最大宽度；

files文件中可以设置第三个值路径（src），错误提示（error），上传状态（status）

onChange上传图片函数

onError上传图片错误函数提示msg->alert(msg)

title表示上传图片标题

filter函数的过滤问题：它能当作map函数运用；进行遍历；

见下面代码：

let data = ['道','流道','的开放接口都是'] var newData = data.filter((e,i,s)=>{ console.log(e);//道 流道 的开放接口都是 console.log(i);//0,1,2 console.log(s);//返回原数组 return true; //return false }) console.log(newData); 返回原数组，return中可以加判断对所需的素组进行过滤；

input上传调取摄像头及图片上传；

<input type='file' id='files' accept="image/*" capture="camera"/> /* *capture属性和accept属性的值； * *1.camera表示只调取照相机；image/*表示接受所有图片； * *2.如果属性中使用multiple属性，则caputer属性失效；表示支持多选； *2.2 accept 可以为vedio audio image值表示即可从本地也可调取手机设备； * *3.只要上传视频或者音频accept属性为vedio或audio即可，但是capture属性的值，得有变化 *3.3 capture可以为camcorder摄像机 microphone调取录音功能（ios手机无法直接调取录音功能，Andrio行） * */

图片上传，可以采取两种方式，一种是formData数据进行上传，另种将图片转换成路径，进行上传。

第一种：FormData;

let formData = new FormData(); for(var i in data){ formData.append(i,data[i]) } //此时data上送参数则为 formData，这种形式即可上传文件图片也可以上传其他类型数据。

第二种：路径方式：

function getImgObj(file){ var url = ''; if(window.createObjectURL != undefined){ url = window.createObjectURL(file); }else if(window.URL != undefined){ url = window.URL.createObjectURL(file); }else if(window.webkitURL != undefined){ url = window.webkitURL.createObjectURL(file); } return url; } //转成路径进行上传；