vue2 img src 无法显示问题
<template>
<div class="body">
<div class="zhanwei" v-if="zhanwei"></div>
<div style="height: 60px"></div>
<div class="content">
<div class="title">
<div @click="tabChange('pdf2word')" id="div1">
<img :src="pdf2wordUrl" alt="Image">
pdf转换Word
<a-divider dashed/>
</div>
<div @click="tabChange('pdf2excel')" id="div2">
<img :src="pdf2excelUrl" alt="Image">
pdf转换Excel
<a-divider dashed/>
</div>
<div @click="tabChange('pdf2ppt')" id="div3">
<img :src="pdf2pptUrl" alt="Image">
pdf转换PPT
<a-divider dashed/>
</div>
<div @click="tabChange('pdf2jpg')" id="div4">
<img :src="pdf2jpgUrl" alt="Image">
pdf转换图片
<a-divider dashed/>
</div>
<div @click="tabChange('pdf2html')" id="div5">
<img :src="pdf2htmlUrl" alt="Image">
pdf转换Html
<a-divider dashed/>
</div>
<div @click="tabChange('pdf2text')" id="div6">
<img :src="pdf2textUrl" alt="Image">
pdf转换Text
<a-divider dashed/>
</div>
</div>
<div class="upload">
</div>
<div class="text-pdf">
{{convertTitle}}
</div>
<div class="text-pdf-file">
将文件拖到此处，或点击选择文件按钮，小于100MB，请不要上传电子书等存在侵权的资源！
</div>
<div class="text-pdf-file">
<input @change="handleFileUpload" class="button-add" type="file">
<a-button :block="true" @click="pdf2word()" class="button-pro" style="text-align: center"
type="primary">
开始处理
</a-button>
</div>
</div>
</div>
</template>
<script>
import PermissionModal from './modules/PermissionModal'
import GlobalFooter from '@/components/page/GlobalFooter'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import PermissionDataRuleList from './PermissionDataRuleList'
import JEllipsis from '@/components/jeecg/JEllipsis'
import http from '@api/url'
import imgOn from '../../assets/on.png'
import imgOff from '../../assets/off.png'
export default {
name: 'pdf2excel',
mixins: [JeecgListMixin],
components: {
PermissionDataRuleList,
PermissionModal,
GlobalFooter,
JEllipsis
},
data() {
return {
consoleText: '',
file: null,
timer: null,
zhanwei: false,
aLiModeData: {
'model': 'wanx-v1',
'input': {
'prompt': '一只奔跑的猫'
},
'parameters': {
'style': '<sketch>',
'size': '1024*1024',
'n': 1,
'seed': 42,
'strength': 0.5,
'ref_mode': 'repaint'
}
},
otherModeData: {
modelKey: '',
prompt: '',
sizeIndex: 0,
styleIndex: 0,
},
userShow: true,
image1: 'require(\'@/assets/on.png\')',
image2: 'require(\'@/assets/off.png\')',
currentImage: '',
pdf2wordUrl: imgOff,
pdf2excelUrl: imgOff,
pdf2pptUrl: imgOff,
pdf2jpgUrl: imgOff,
pdf2htmlUrl: imgOff,
pdf2textUrl: imgOff,
aLiModeData: {
'url': '',
},
aLiDocFind: {
'id': '',
},
flag: '0',
convertTitle: 'pdf 转换 word'
}
},
mounted() {
// 添加滚动事件监听
window.addEventListener('scroll', this.handleScroll)
this.currentImage = this.image1
},
beforeDestroy() {
// 移除滚动事件监听
window.removeEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll() {
// 处理滚动事件
if (window.scrollY >= 20) {
this.zhanwei = true
} else {
this.zhanwei = false
}
},
handleFileUpload(event) {
this.file = event.target.files[0]
},
submitFile() {
if (!this.file) {
alert('请选择一个文件')
return
}
const formData = new FormData()
formData.append('file', this.file)
},
pdf2word() {
const formData = new FormData()
formData.append('file', this.file)
http.post('/upload/file', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then((response) => {
console.log('pdf2word response data：', response)
console.log('pdf2word response data：', response.data.url)
// 处理响应
this.aLiModeData.url = response.data.url
this.pdf2wordByaliyunProcStepOne()
})
.catch((error) => {
console.log(error)
})
},
pdf2wordByaliyunProcStepOne() {
//调用阿里云api开始处理
http.post('/concert/pdfToWord', this.aLiModeData)
.then((response) => {
console.log('concert/pdfToWord 9999：', response)
this.aLiDocFind.id = response.data.data.body.Data.Id
this.pdf2wordByaliyunProcStep02()
})
.catch((error) => {
console.log(error)
})
},
pdf2wordByaliyunProcStep02() {
//this.aLiDocFind.id = 'docmind-20240704-e0c78c564b7f4da9820774ef3e008bff'
http.post('/getConvertResult/GetDocumentConvertResult', this.aLiDocFind)
.then((response) => {
console.log('-----------------monitor start------', response.data.data.body.Completed)
if (response.data.data.body.Completed.toString() == 'false') {
console.log('-----------------monitor start------')
this.monitor()
} else {
// clearInterval(this.timer); // 销毁组件前清除定时器
//alert("clearInterval time");
clearInterval(this.timer)
console.log('-----------------finish------', response)
console.log('-----------------finish------', response.data.data.body.Data[0].Url)
// 打开一个新窗口或新标签，并导航到指定的URL
//window.open(response.data.data.body.Data[0].Url, '_blank')
}
})
.catch((error) => {
console.log(error)
})
},
monitor() {
//执行需要定时重复执行的任务
this.timer = setInterval(() => {
console.log('timer start ')
this.pdf2wordByaliyunProcStep02()
}, 2000) // 每2秒钟执行一次
},
tabChange(type) {
if (type == 'pdf2word') {
this.convertTitle = 'pdf 转换 word'
this.turnOff()
this.pdf2wordUrl = imgOn
}
if (type == 'pdf2excel') {
this.convertTitle = 'pdf 转换 excel'
this.turnOff()
this.pdf2excelUrl = imgOn
}
if (type == 'pdf2ppt') {
this.convertTitle = 'pdf 转换 ppt'
this.turnOff()
this.pdf2pptUrl = imgOn
}
if (type == 'pdf2jpg') {
this.convertTitle = 'pdf 转换 jpg'
this.turnOff()
this.pdf2jpgUrl = imgOn
}
if (type == 'pdf2html') {
this.convertTitle = 'pdf 转换 html'
this.turnOff()
this.pdf2htmlUrl = imgOn
}
if (type == 'pdf2text') {
this.convertTitle = 'pdf 转换 text'
this.turnOff()
this.pdf2textUrl = imgOn
}
},
turnOff() {
this.pdf2wordUrl = imgOff
this.pdf2excelUrl = imgOff
this.pdf2pptUrl = imgOff
this.pdf2jpgUrl = imgOff
this.pdf2htmlUrl = imgOff
this.pdf2textUrl = imgOff
},
turnOn() {
this.pdf2wordUrl = imgOn
this.pdf2excelUrl = imgOn
this.pdf2pptUrl = imgOn
this.pdf2jpgUrl = imgOn
this.pdf2htmlUrl = imgOn
this.pdf2textUrl = imgOn
},
// 上传图片
handleChange(info) {
const status = info.file.status
if (status !== 'uploading') {
// console.log(info.file, info.fileList);
}
if (status === 'done') {
this.$message.success(`${info.file.name} file uploaded successfully.`)
} else if (status === 'error') {
this.$message.error(`${info.file.name} file upload failed.`)
}
}
}
}
</script>
<style lang="less" scoped>
.zhanwei {
//background-color: #ffffff;
width: 100%;
height: 110px;
position: fixed;
top: 0;
left: 0;
z-index: 8;
background: url(../../assets/imgs/home_backCopy.png) no-repeat 100%;
/*background-image: url("assets/imgs/home_backCopy.png");*/
background-size: 100%;
}
.content {
width: 1700px;
border-radius: 10px;
opacity: 1;
background: rgba(255, 255, 255, 0.5);
box-sizing: border-box;
border: 1px solid #FFFFFF;
margin: auto;
padding: 30px;
.title {
font-family: 思源黑体;
font-size: 20px;
font-weight: 500;
line-height: normal;
letter-spacing: 0em;
color: #3D3D3D;
.titleDivider {
margin-top: 12px;
margin-bottom: 1px;
width: 100%;
height: 4.12px;
opacity: 1;
/* 蓝紫渐变 */
/*background: linear-gradient(95deg, #3A78FF 0%, #813BFF 95%);*/
background: #22e2ff;
.titleItem {
display: flex;
}
}
}
#div1, #div2, #div3, #div4, #div5, #div6 {
display: inline-block;
}
.upload {
margin: 60px auto 0 auto;
width: 300px;
height: 300px;
border: 2px solid red;
background-image: url('../../assets/pdf2word.png'); /* 图片背景 */
background-size: contain;
}
.text-pdf {
margin: 60px auto 0 auto;
font-size: 70px;
text-align: center;
display: block;
}
.text-pdf-file {
display: block;
margin: 60px auto 0 auto;
font-size: 40px;
text-align: center;
}
.button-add {
width: 300px;
height: 70px;
border-radius: 10px;
}
.divider {
border-top: 1px solid #ccc; /* 分割线的颜色和宽度 */
margin: 5px 5px 5px 5px; /* 分割线的上下外边距 */
}
.button-line {
display: flex;
margin-top: 30px;
}
.button-input {
display: flex;
margin-top: 30px;
text-align: center;
}
.flex-item {
flex: 1 1 auto;
width: 15px;
margin-right: 10px;
}
.circle {
flex: 1 1 auto;
width: 15px;
margin-right: 10px;
border-radius: 10px;
background: #7de3c8;
}
.label {
line-height: 20px;
display: inline-block;
margin-left: 5px;
margin-right: 15px;
color: #777;
}
.radio_type {
width: 20px;
height: 20px;
appearance: none;
position: relative;
}
.radio_type:before {
content: '';
width: 20px;
height: 20px;
border: 1px solid #7d7d7d;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked:before {
content: '';
width: 20px;
height: 20px;
border: 1px solid #c59c5a;
background: #c59c5a;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked:after {
content: '';
width: 10px;
height: 5px;
border: 2px solid white;
border-top: transparent;
border-right: transparent;
text-align: center;
display: block;
position: absolute;
top: 6px;
left: 5px;
vertical-align: middle;
transform: rotate(-45deg);
}
.radio_type:checked + label {
color: #c59c5a;
}
.container {
display: flex;
}
.left {
width: 70%;
}
.right {
width: 100%;
margin-right: 35px;
}
.button-pro {
font-size: 40px;
width: 200px;
height: 70px;
margin-left: 120px;
border-radius: 10px;
background: repeating-linear-gradient(to right, #3c75ff, #7f3cff);
}
}
.body {
z-index: 1;
position: relative;
}
</style>