<template>
<div>
<uni-avatar :src="avatarUrl" size="80" @click="chooseImage"></uni-avatar>
<input type="file" style="display: none" ref="fileInput" @change="uploadImage">
</div>
</template>
<script>
export default {
data() {
return {
avatarUrl: 'https://yourserver.com/avatar.png'
}
},
methods: {
chooseImage() {
this.$refs.fileInput.click()
},
uploadImage(event) {
const file = event.target.files[0]
const formData = new FormData()
formData.append('file', file)
uni.request({
url: 'https://yourserver.com/upload',
method: 'POST',
header: {
'Content-Type': 'multipart/form-data'
},
data: formData,
success: (res) => {
this.avatarUrl = res.data.url
},
fail: (err) => {
console.log(err)
}
})
}
}
}
</script>