242 lines
8.3 KiB
Plaintext
242 lines
8.3 KiB
Plaintext
<template>
|
|
<WepyImageCropper id="image-cropper" :limit_move="limit_move" :newPic.sync="newPic" :disable_rotate="disable_rotate" :disable_ratio="disable_ratio" :borderColor="borderColor" :width="width" :height="height" :min_width="width" :min_height="height" :imgSrc.sync="src" @load.user="cropperload" @imageload.user="loadimage" @tapcut.user="clickcut" @saveCut.user="saveCut" :quality="quality" ref="child"></WepyImageCropper>
|
|
</template>
|
|
|
|
<script>
|
|
import wepy from '@wepy/core'
|
|
import {service} from '../../config.js'
|
|
import base from '../../mixins/base'
|
|
import https from '../../mixins/https'
|
|
|
|
wepy.page({
|
|
mixins: [base, https],
|
|
// config = {
|
|
// navigationBarTitleText: '上传图片'
|
|
// }
|
|
// components = {
|
|
// WepyImageCropper
|
|
// }
|
|
|
|
data: {
|
|
src: '',
|
|
quality: 1,
|
|
width: 300, // 宽度
|
|
height: 300, // 高度
|
|
cut_top: 212,
|
|
cut_left: 37,
|
|
chooseShow: false,
|
|
limit_move: true,
|
|
disable_ratio: true,
|
|
disable_rotate: true,
|
|
jumpString: null,
|
|
borderColor: '#D92553',
|
|
filePaths: '',
|
|
jump: '',
|
|
newPic: 0,
|
|
uploadData: null
|
|
},
|
|
onLoad(e) {
|
|
this.src = e.src
|
|
this.jumpString = e.jumpString
|
|
this.newPic = e.newPic
|
|
this.jump = e.jump
|
|
},
|
|
onShow() {
|
|
// let headPortraitImg = wx.getStorageSync('headPortraitImg')
|
|
// if(headPortraitImg){
|
|
// this.src = headPortraitImg
|
|
// }
|
|
},
|
|
onReady() { // 开始裁剪
|
|
// this.src = 'https://images.ufutx.com/201907/19/c66ed5d4a3900b873815b4856758931e.jpeg'
|
|
// wx.showLoading({
|
|
// title: '加载中'
|
|
// })
|
|
},
|
|
imgSrcCut(e) {
|
|
|
|
},
|
|
|
|
methods: {
|
|
uploadFile(type) {
|
|
let vm = this
|
|
console.log(vm.filePaths, 'filePath')
|
|
console.log(vm.uploadData, 'vm.uploadData')
|
|
if (vm.uploadData) {
|
|
vm.$showLoading(`上传中...`)
|
|
let fileName = new Date().getTime() + Math.floor(Math.random() * 150) + '.' + vm.filePaths.split('.').pop().toLowerCase()
|
|
let filePathUrl = vm.uploadData.host + '/' + vm.uploadData.dir + fileName
|
|
wx.uploadFile({
|
|
url: vm.uploadData.host,
|
|
filePath: vm.filePaths,
|
|
name: 'file', // 必须填file。
|
|
formData: {
|
|
key: vm.uploadData.dir + fileName,
|
|
policy: vm.uploadData.policy,
|
|
OSSAccessKeyId: vm.uploadData.access_id,
|
|
signature: vm.uploadData.signature
|
|
// 'x-oss-security-token': securityToken // 使用STS签名时必传。
|
|
},
|
|
header: {
|
|
'Authorization': 'Bearer ' + wx.getStorageSync('token'),
|
|
// 'content-type': 'multipart/form-data',
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
},
|
|
success: (res) => {
|
|
if (res.statusCode === 204) {
|
|
console.log(filePathUrl, '上传成功')
|
|
if (this.jump === '/pages/users/userInfo') {
|
|
this.$redirectTo(`${this.jump}?image=${filePathUrl}`)
|
|
} else if (this.jumpString === 'basicData') {
|
|
let photo = filePathUrl
|
|
// this.$preload('image',path)
|
|
var pages = getCurrentPages()
|
|
var prevPage = ''
|
|
if (pages.length >= 2) {
|
|
prevPage = pages[pages.length - 2]
|
|
}
|
|
if (prevPage) {
|
|
let dataV1 = prevPage.data.photo
|
|
console.log(dataV1, '34===')
|
|
dataV1 = photo
|
|
prevPage.setData({photo: dataV1})
|
|
prevPage.onShow({photo: dataV1})
|
|
wx.setStorageSync('baseImage', dataV1)
|
|
}
|
|
wx.navigateBack({
|
|
delta: 1
|
|
})
|
|
} else {
|
|
vm.upDataAvatar(filePathUrl)
|
|
}
|
|
// if (vm.num == 1) {
|
|
// vm.$emit('changeVal', dataV2)
|
|
// } else {
|
|
// if (vm.uploadPics.length <= vm.num) {
|
|
// vm.uploadPics.push(dataV2)
|
|
// } else {
|
|
// console.log('==--099')
|
|
// vm.$emit('changeVal', vm.uploadPics)
|
|
// }
|
|
// }
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
wx.showModal({ // 使用模态框提示用户进行操作
|
|
title: `温馨提示：`,
|
|
content: `很抱歉` + err,
|
|
showCancel: false,
|
|
confirmText: `确定`,
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
vm.$gotoBack(1)
|
|
vm.$emit('changeVal', '')
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
let vm = this
|
|
vm.$showToast(`网络环境异常，请稍后重试`)
|
|
wx.request({
|
|
url: `${service.host}/ali/upload/signature`,
|
|
header: {
|
|
'Authorization': 'Bearer ' + wx.getStorageSync('token'),
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
},
|
|
method: 'get',
|
|
data: {},
|
|
success: ({code, data}) => {
|
|
vm.uploadData = data.data
|
|
vm.$app.$options.globalData.uploadData = data.data
|
|
vm.uploadFile()
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
upDataAvatar(path) {
|
|
let data = {
|
|
photo: path
|
|
}
|
|
this.$put({url: `${service.host}/user/register/profile`, data}).then(({code, data}) => {
|
|
this.$Toast_success('上传成功')
|
|
this.$gotoBack(1)
|
|
}).finally(() => {
|
|
wx.hideLoading()
|
|
})
|
|
},
|
|
|
|
upDataAvatarV2(path) {
|
|
this.$showLoading('加载中...')
|
|
let data = {
|
|
photo: path
|
|
}
|
|
this.$put({url: `${service.user}/photo`, data}).then(({code, data}) => {
|
|
// this.$Toast_success('上传成功')
|
|
this.$gotoBack(1)
|
|
}).finally(() => {
|
|
wx.hideLoading()
|
|
})
|
|
},
|
|
cropperload(e) {
|
|
console.log('cropper初始化完成:' + e)
|
|
},
|
|
loadimage(e) {
|
|
console.log('图片加载完成', e)
|
|
},
|
|
|
|
clickcut(e) {
|
|
|
|
},
|
|
saveCut(e) {
|
|
if (this.src == e.url && this.jumpString) {
|
|
this.$gotoBack(1)
|
|
this.upDataAvatarV2(e.url)
|
|
return
|
|
}
|
|
this.filePaths = e.url
|
|
this.uploadFile('img')
|
|
this.$showLoading('上传图片中...')
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.main-box{
|
|
width: 100%;
|
|
}
|
|
/*width: 80vw;*/
|
|
/*height: 10vh;*/
|
|
/*position: fixed;*/
|
|
/*bottom: 0;*/
|
|
/*left: 0;*/
|
|
/*z-index: 999999;*/
|
|
/*padding: 0 10vw;*/
|
|
/*.main-cancel,.main-save{*/
|
|
/*background: #d1d1d1;*/
|
|
/*padding: 8rpx 0;*/
|
|
/*width: 200rpx;*/
|
|
/*border-radius: 6rpx;*/
|
|
/*color: #D92553;*/
|
|
/*}*/
|
|
/*.main-save{*/
|
|
/*color: white;*/
|
|
/*background: #D92553;*/
|
|
/*}*/
|
|
/*}*/
|
|
</style>
|
|
<config>
|
|
{
|
|
navigationBarTitleText: '编辑资料',
|
|
enablePullDownRefresh: false,
|
|
backgroundColorTop: '#ffffff',
|
|
backgroundColorBottom: '#ffffff',
|
|
usingComponents: {
|
|
WepyImageCropper: '~@/components/wepy-image-cropper',
|
|
}
|
|
}
|
|
</config>
|