Browse Source

背景图上传功能

master
congzc 2 years ago
parent
commit
d357b45cb5
4 changed files with 45 additions and 58 deletions
  1. +1
    -1
      src/api/editModel.js
  2. +33
    -54
      src/components/CutImg.vue
  3. +3
    -0
      src/styles/index.scss
  4. +8
    -3
      src/views/model/editModel.vue

+ 1
- 1
src/api/editModel.js View File

@@ -14,7 +14,7 @@ import request from '@/utils/request'
export function awsImgUpload(data) {
return request({
url: `/api/upload/awsImgUpload
file`,
`,
method: 'post',
data:data
})

+ 33
- 54
src/components/CutImg.vue View File

@@ -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%;


+ 3
- 0
src/styles/index.scss View File

@@ -26,4 +26,7 @@ p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.relative {
position: relative;
}

+ 8
- 3
src/views/model/editModel.vue View File

@@ -217,7 +217,8 @@
<!-- 上传 -->
<div v-if="bjAction == 1" class="myTab-show-list-upload">
<img src="../../assets/icon/icon-upload@2x.png" alt="" />
<input type="file" />
<!-- 上传背景组件 -->
<CutImg class="CutImg"></CutImg>
</div>
<!-- 图片列表 -->
<div
@@ -325,6 +326,8 @@ import Vue from 'vue'
import { Toast } from 'vant'
import { mapState, mapActions } from 'vuex'
import HeadTop from './../../components/common/head.vue'
import CutImg from '../../components/CutImg.vue'

// 工具
import { scrollToID } from '../../utils'
// 语言检测插件
@@ -344,7 +347,8 @@ import { getModelDetailById } from '../../api/getPaper.js'
Vue.use(Toast)
export default {
components: {
HeadTop
HeadTop,
CutImg
},
data() {
return {
@@ -582,6 +586,8 @@ export default {
</script>

<style lang="scss" scoped>
.CutImg {
}
.page {
// transform会导致其子元素固定定位失效
// transform: translateX(30%);
@@ -995,7 +1001,6 @@ export default {
height: 120px;
background: #ddd;
border-radius: 10px;

img {
background-color: #fff;
position: absolute;


Loading…
Cancel
Save