You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

105 lines
2.2 KiB

<template>
<view class="">
<u-upload
accept="image"
:capture="['album', 'camera']"
:fileList="fileList"
@afterRead="afterRead"
@delete="deletePic"
:max-count="1"
name="pet" width="60"
height="60">
<image src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/image.png" style="width: 60px;height: 60px;">
</image>
</u-upload>
</view>
</template>
<script>
import { currentUrl } from '@/utils/getUrl'
export default{
data(){
return{
fileList:[]
}
},
props:{
imageUrl:{
type:String,
default:''
}
},
mounted(){
if(this.imageUrl){
this.fileList=[{url:this.imageUrl}]
}else{
this.fileList=[]
}
},
methods:{
// 删除图片
deletePic(event) {
this.fileList.splice(event.index, 1)
this.$emit('update:imageUrl', '');
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this.fileList.length
lists.map((item) => {
this.fileList.push({
...item,
status: 'uploading',
message: '上传中'
})
})
const result = await this.uploadFilePromise(lists[0].url)
if(result){
this.fileList[0].status='success'
this.fileList[0].message=''
this.fileList[0].url=result
}
this.$emit('update:imageUrl', this.fileList[0].url);
// for (let i = 0; i < lists.length; i++) {
// const result = await this.uploadFilePromise(lists[i].url)
// let item = this.fileList[fileListLen]
// this.fileList.splice(fileListLen, 1, Object.assign(item, {
// status: 'success',
// message: '',
// url: result
// }))
// fileListLen++
// }
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: `${currentUrl}/h5/oss/upload`,
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
setTimeout(() => {
if(res&&res.data){
let resData = JSON.parse(res.data);
resolve(resData.url);
}
reject("上传失败");
}, 1000)
},
});
})
},
}
}
</script>
<style></style>