图片选择 Vuejs

Question

我在后端有两张图片，当我点击网站（前端）上的图片 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>

Answer 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)
    })
},