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

xiaoxiao2021-02-28  7

第一步:连接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; } //转成路径进行上传;

 

 

 

转载请注明原文地址: https://www.6miu.com/read-1400097.html

最新回复(0)