可選擇多張圖片進(jìn)行上傳（接口是一張一張的上傳的）
<View className="textarea-title">上傳照片</View>
<View className="patient-document-pic-box">
{files.map((file, index) =>
<View className="temp-file-pic-box" key={'file' + index}>
<Image className="temp-file-pic" src={file.path}></Image>
<Image className="close-icon" src='https://kano.guahao.cn/Efm199642756' onClick={this.onDeletePhoto.bind(this, index)}></Image>
{this.state.showLoadingLayer && !file.isUploaded &&
<View className="pic-layer">
<View className="layer-loading">
<View className="layer-progress"></View>
{this.state.showUploadingText && <Text className="layer-text">正在上傳</Text>}
</View>
</View>}
</View>
)}
{
this.state.files.length < 9 &&
<View className="camera-pic-box" onClick={this.onChooseImg.bind(this)}>
<Image className="camera-pic" src='https://kano.guahao.cn/GEm199642253'></Image>
<Text className="add-text">添加照片</Text>
</View>
}
</View>
.patient-document-pic-box, .temp-file-box {
display: flex;
align-items: center;
flex-wrap: wrap;
.temp-file-pic-box {
position: relative;
.temp-file-pic {
width: 150px;
height: 150px;
margin-right: 20px;
margin-bottom: 20px;
flex-shrink: 0;
}
.close-icon {
width: 40px;
height: 40px;
position: absolute;
top: -20px;
right: 0px;
z-index: 2;
}
.pic-layer {
width: 150px;
height: 150px;
background: rgba(0,0,0,.6);
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
.layer-text {
font-size: 18px;
color: #fff;
opacity: 0.8;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.layer-loading {
width: 60px;
height: 60px;
position: relative;
.layer-progress {
width: 60px;
height: 60px;
border-radius: 50%;
border: 5px solid #8F8E8C;
border-top: 5px solid #fff;
position: absolute;
left: -5rpx;
top: -3rpx;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.layer-text {
position: absolute;
z-index: 2;
top: 50%;
transform: translate(-50%,-50%);
left: 50%;
word-break: keep-all;
}
}
}
}
.camera-pic-box {
position: relative;
top: -14px;
width: 149px;
height: 149px;
border: 1Px solid #ddd;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.camera-pic {
width: 45px;
height: 37px;
}
.add-text {
font-size: 18px;
color: #9B9B9B;
}
}
}
// 關(guān)于typescript的類型定義你可以去掉
onChooseImg (): void {
const filesLength = this.state.files.length
this.setState({
fileIndex: 0
})
if (this.state.files.length < 9) {
Taro.chooseImage({
sourceType: ['album', 'camera'],
sizeType: ['compressed'],
count: 9 - filesLength
}).then((res:any) => {
this.setState({
files: this.state.files.concat(res.tempFiles).slice(0,9)
})
this.setState({
showLoadingLayer: true,
showUploadingText: true,
showWaitingUploadText: true
})
// 選中圖片之后就要上傳
/*這里我一開始直接遍歷res.tempFiles數(shù)組摇予，后來發(fā)現(xiàn)沽讹，我上傳的跟我選中的圖片無法對(duì)上捎迫，所以這里不能直接循環(huán)遍歷選中的圖片數(shù)組*/
this.onUpload(res.tempFiles, res.tempFiles[this.state.fileIndex])
}).catch(e=> {console.log(e)})
} else {
Taro.showToast({
title: '最多只能上傳9張圖片统刮！',
icon: 'none'
})
}
}
// 這里只在本地刪除
onDeletePhoto (index:number): void {
this.state.files.splice(index, 1)
this.setState({
files: this.state.files
})
for (let i = 0; i < this.state.recordFiles.length; i++) {
if (index === i) {
this.state.recordFiles.splice(index, 1)
this.setState({
recordFiles: this.state.recordFiles
})
break;
}
}
}
onUpload (tempArr: Array<IFile>, file: IFile): void {
const fileObj = file
file && Taro.uploadFile({
url: `這里換成你的上傳圖片的接口地址`,
filePath: file.path,
name: 'file',
// 根據(jù)情況看是否需要傳token
header: {
"Content-Type": "multipart/form-data",
Authorization: 'Bearer ' + Taro.getStorageSync('UserInfo').accessToken
},
// complete比success先執(zhí)行
complete: () => {
if (this.state.fileIndex === tempArr.length) {
this.setState((preState: any) => {
preState.showLoadingLayer = false
preState.showUploadingText = false
preState.showWaitingUploadText = false
})
} else {
let { fileIndex } = this.state
fileIndex = fileIndex + 1 // 避免index = 0上傳兩次
this.onUpload(tempArr, tempArr[fileIndex])
}
},
success: (res) => {
let file = JSON.parse(res.data).obj
// 控制蒙層的顯示
for (let i = 0; i < this.state.files.length; i++) {
if (this.state.files[i].path === fileObj.path) {
this.state.files[i].isUploaded = true
break;
}
}
this.setState((preState:any) => {
preState.recordFiles = preState.recordFiles.concat(file[0].url)
preState.fileIndex = preState.fileIndex + 1
}, () => {
console.log('success fileIndex = ', this.state.fileIndex)
})
}
})
}
需要在state中定義的數(shù)據(jù)：
state = {
files: [],
recordFiles: [],
showLoadingLayer: false,
showUploadingText: false,
fileIndex: 0 // 當(dāng)前上傳的圖片索引
}
