100 lines
3.0 KiB
Vue
100 lines
3.0 KiB
Vue
<template>
|
||
<div class="imghead">
|
||
<img id="image" />
|
||
<div class="submit-btn" @click="sub">{{lan.$t("baocun") }}</div>
|
||
</div>
|
||
</template>
|
||
<style lang="scss" scoped>
|
||
.imghead {
|
||
padding-top:0.3rem;
|
||
width: 550px;
|
||
// height: 550px;
|
||
// overflow: hidden;
|
||
#image{
|
||
width: 500px;
|
||
height: 500px;
|
||
}
|
||
.submit-btn {
|
||
width: 63px;
|
||
height: 23px;
|
||
background: #08ae98;
|
||
border-radius: 3px;
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
line-height: 23px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
margin: 20px 0 0 auto;
|
||
}
|
||
|
||
}
|
||
</style>
|
||
<script lang="ts">
|
||
import { useI18n } from '@/utils/i18n';
|
||
import { uploadflie } from '@/utils/vod';
|
||
import { defineComponent, onMounted } from "vue";
|
||
export default defineComponent({
|
||
props: {
|
||
url: {
|
||
type: File,
|
||
},
|
||
},
|
||
setup(props, ctx) {
|
||
const lan: any = useI18n();
|
||
let CROPPER: any;
|
||
onMounted(() => {
|
||
const reader = new FileReader();
|
||
if (props.url) {
|
||
reader.readAsDataURL(props.url);
|
||
reader.onload = () => {
|
||
const dataURL = reader.result;
|
||
//将img的src改为刚上传的文件的转换格式
|
||
const image: any = document.querySelector("#image");
|
||
console.log(image)
|
||
if(image){
|
||
console.log(110)
|
||
image.src = dataURL;
|
||
//创建cropper实例-----------------------------------------
|
||
CROPPER = new window.Cropper(image, {
|
||
aspectRatio: 1,
|
||
viewMode: 1,
|
||
background: false,
|
||
zoomable: false
|
||
|
||
});
|
||
|
||
}
|
||
|
||
|
||
};
|
||
}
|
||
});
|
||
function sub(){
|
||
if(CROPPER){
|
||
CROPPER.getCroppedCanvas({
|
||
maxWidth: 4096,
|
||
maxHeight: 4096,
|
||
fillColor: '#fff',
|
||
imageSmoothingEnabled: true,
|
||
imageSmoothingQuality: 'high',
|
||
}).toBlob(async (blob: any) => {
|
||
//之后就可以愉快的将blob数据发送至后端啦，可根据自己情况进行发送，我这里用的是axios
|
||
// 第三个参数为文件名，可选填.
|
||
const file = new File([blob], 'name.png',{type: "image/png"});
|
||
const res = await uploadflie(file, (info: any) => {
|
||
console.log(info);
|
||
});
|
||
ctx.emit("upload", res)
|
||
})
|
||
}
|
||
}
|
||
return {
|
||
lan,
|
||
sub
|
||
};
|
||
},
|
||
});
|
||
</script> |