react-weui元件的運用之上傳圖片控制元件的用法及input上傳圖片
阿新 • • 發佈:2019-02-09
第一步:連線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;
}
//轉成路徑進行上傳;