我在后端有两个图像,当我点击网站上的图像1(前端)时,我看到图像1的结果,因为它是硬编码的,当我点击图像2时,我也看到了图像1的结果。 如何制作我的代码,以便在单击单个图像时可以看到我的两个图像。 任何人都可以给我一个提示吗?
我的代码: listImage.vue
<template>
<div class="fileUpload">
<b-container fluid>
<h4>Image Overview</h4>
<b-button variant="success" class="btn-right" @click="uploadImage" method="post">Upload image</b-button>
<div class="file">Selected file: {{selectedFile && selectedFile.name}}</div>
<b-button v-model="selectedFile" variant="success" @click="$refs.fileInput.click()" class="btn-right">Select an image</b-button>
<input style="display: none" ref="fileInput" type="file" @change="fileSelected" enctype="multipart/form-data">
<b-table @row-clicked="viewImage" striped hover :items="images" :fields="image_fields"></b-table>
</b-container>
</div>
</template>
<script>
// eslint-disable-next-line
/* eslint-disable */
import axios from 'axios'
export default {
name: 'listImage',
data() {
return {
selectedFile: null,
images: [],
image_fields: ['id', 'name'],
total_images: 1,
}
},
created() {
this.loadImages(0, 10)
},
watch: {
currentPage: function (newPage) {
this.loadImages(newPage, 10)
}
},
methods: {
fileSelected(evt, e) {
evt.preventDefault()
console.log(evt);
this.selectedFile = evt.target.files[0]
},
uploadImage() {
var data = new FormData();
data.append('image', this.selectedFile, this.selectedFile.data)
var token = sessionStorage.getItem('token')
const config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
window.API.post('https://111.11.111.111:8080/images/?token=' + token, data, config)
.then(response => this.$router.push('/template')) //how to refresh the upload page
.catch((error) => {
console.log(JSON.stringify(error))
})
},
viewImage(record, index) {
var id = record.id
this.$router.push({ name: 'viewImage', params: { id } })//check the router in index.js
},
loadImage(e) {
}
}
}
</script>
我的viewImage代码:
<template>
<b-container fluid>
<h4>Images</h4>
<div>
<img v-bind:src="image" />
</div>
</b-container>
</template>
<script>
// eslint-disable-next-line
/* eslint-disable */
export default {
data() {
return {
image: ''
}
},
created() {
this.image = 'https:111.111.111.111/images/rearview.jpg?token=TX7PS-tCyTS1p72kHxo4594jjwf74'
},
methods: {
}
}
</script>
答案 0 :(得分:1)
解决。
created() {
var token = sessionStorage.getItem('token')
window.API.get(`images/` + this.$route.params.id + '?token=' + token)
.then(response => {
this.fileName = response.data.name;
this.image = 'data:image/png; base64, ' + response.data.data;
})
.catch(e => {
this.errors.push(e)
})
},