|
|
@@ -1,24 +1,8 @@ |
|
|
|
<template> |
|
|
|
<div class="uploder"> |
|
|
|
<div class="change-photo-setter"> |
|
|
|
<van-uploader |
|
|
|
class="sett-item" |
|
|
|
:before-read="beforeRead" |
|
|
|
accept="image/*" |
|
|
|
> |
|
|
|
<div>照片图库</div> |
|
|
|
<img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> |
|
|
|
</van-uploader> |
|
|
|
<van-uploader |
|
|
|
class="sett-item" |
|
|
|
:before-read="beforeRead" |
|
|
|
capture="camera" |
|
|
|
> |
|
|
|
<div>拍照</div> |
|
|
|
<img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> |
|
|
|
</van-uploader> |
|
|
|
<van-uploader class="sett-item" :before-read="beforeRead"> |
|
|
|
<div>选取文件</div> |
|
|
|
<div style="height: 100%"></div> |
|
|
|
<img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> |
|
|
|
</van-uploader> |
|
|
|
</div> |
|
|
@@ -71,6 +55,8 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { awsImgUpload } from '@/api/editModel' |
|
|
|
import { Toast } from 'vant' |
|
|
|
import { VueCropper } from 'vue-cropper' |
|
|
|
export default { |
|
|
|
name: 'uploadAva', |
|
|
@@ -117,6 +103,7 @@ export default { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
beforeRead(file) { |
|
|
|
console.log(1) |
|
|
|
if (file.type !== 'image/jpeg' && file.type !== 'image/png') { |
|
|
|
this.$toast('请上传 jpg/png 格式图片') |
|
|
|
return false |
|
|
@@ -138,25 +125,43 @@ export default { |
|
|
|
// let formData = new FormData() |
|
|
|
this.loadingShow = true |
|
|
|
console.log(this.option) |
|
|
|
this.$refs.cropper.getCropBlob((data) => { |
|
|
|
// formData.append('headFile', data, this.imageFileName) |
|
|
|
// formData.append('id', this.$store.getters.user.userId) |
|
|
|
console.log(data) |
|
|
|
// uploadAva(formData).then((res) => { |
|
|
|
// this.showCropper = false |
|
|
|
this.$emit('update:showAta', false) |
|
|
|
// this.$emit('update:avaUrl', res.data) |
|
|
|
// }) |
|
|
|
}) |
|
|
|
this.pushImg({ file: this.option.img }) |
|
|
|
|
|
|
|
// this.$refs.cropper.getCropBlob((data) => { |
|
|
|
// // formData.append('headFile', data, this.imageFileName) |
|
|
|
// // formData.append('id', this.$store.getters.user.userId) |
|
|
|
// console.log(data) |
|
|
|
// // uploadAva(formData).then((res) => { |
|
|
|
// // this.showCropper = false |
|
|
|
// // this.$emit('update:showAta', false) |
|
|
|
// // this.$emit('update:avaUrl', res.data) |
|
|
|
// // }) |
|
|
|
// this.pushImg({ file: data }) |
|
|
|
// }) |
|
|
|
}, |
|
|
|
onClickLeft() { |
|
|
|
this.loadingShow = false |
|
|
|
this.showCropper = false |
|
|
|
this.$parent.showPhotoUploader = false |
|
|
|
}, |
|
|
|
// 上传图片 |
|
|
|
async pushImg(data) { |
|
|
|
try { |
|
|
|
console.log(data) |
|
|
|
const res = await awsImgUpload(data) |
|
|
|
|
|
|
|
this.loadingShow = false |
|
|
|
this.showCropper = false |
|
|
|
Toast.success('上传成功') |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
// .uploder{ |
|
|
|
// overflow: hidden; |
|
|
@@ -179,33 +184,7 @@ export default { |
|
|
|
padding: 10px 30px; |
|
|
|
border-radius: 25px; |
|
|
|
} |
|
|
|
.change-photo-setter { |
|
|
|
width: 400px; |
|
|
|
background: #fff; |
|
|
|
position: absolute; |
|
|
|
top: 11%; |
|
|
|
left: 40px; |
|
|
|
z-index: 300; |
|
|
|
.sett-item { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
/deep/.van-uploader__input-wrapper { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 15px; |
|
|
|
img { |
|
|
|
width: 40px; |
|
|
|
height: 40px; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
.sett-item:first-child { |
|
|
|
border-bottom: 2px solid #ccc; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.uploadava { |
|
|
|
.update-avatar { |
|
|
|
height: 100%; |
|
|
|