在上传前预览图片 VUEjs

Question

我知道这个问题已经被问过了。但是我不知道如何在vuejs中使用这段代码。我尝试了很多次，但是没有任何结果。

我也添加了我的代码。

有人可以帮帮我吗？这是我的代码。

谢谢

html

<template>
<div class="fileUpload">
    <b-container fluid>

        <h4>Image Overview</h4>
        <b-button @click="$refs.fileInput.click()" class="btn-right">Select an image</b-button>

        <b-table @row-clicked="viewImage" striped hover :items="images" :fields="image_fields"></b-table>

        <input style="display: none" ref="fileInput" type="file" @change="fileSelected" enctype="multipart/form-data">
        <b-button variant="success" class="btn-right" @click="uploadImage" method="post">Upload image</b-button>


    </b-container>
</div>

JavaScript

<script>
export default {
    name: 'listImage',
    data() {
        return {
            selectedFile: null,
            images: [],
            image_fields: ['id', 'name'],
            total_images: 1               
        }
    },
    methods: {
        fileSelected(evt) {
            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://110.10.56.10:8000/images/?token=' + token, data, config)
                .then(response => this.$router.push('/listImage'))
                .catch((error) => {
                    console.log(JSON.stringify(error))
                })
        }
    }
}

- omiz

---

谢谢，但我也试过这个了...没有结果。 - omiz

请尝试访问 https://codepen.io/mobifreaks/pen/LIbca - Shubham Patel

我该如何在VueJS中使用这段代码？ - omiz

函数readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah') .attr('src', e.target.result); }; reader.readAsDataURL(input.files[0]); } } - omiz

Answer 1

请记住，浏览器无法显示所有图像类型（例如：tiff格式的图像不能使用此方法）。以下是具体步骤：

• 在文件输入框中添加@change监听器
• 在onChange事件中，创建一个对象URL
• 使用此URL来显示图像

const vm = new Vue({
  el: '#app',
  data() {
    return {
      url: null,
    }
  },
  methods: {
    onFileChange(e) {
      const file = e.target.files[0];
      this.url = URL.createObjectURL(file);
    }
  }
})

body {
  background-color: #e2e2e2;
}

#app {
  padding: 20px;
}

#preview {
  display: flex;
  justify-content: center;
  align-items: center;
}

#preview img {
  max-width: 100%;
  max-height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <input type="file" @change="onFileChange" />

  <div id="preview">
    <img v-if="url" :src="url" />
  </div>
</div>

- wafs

---

我知道这些代码可以工作，但你能简要解释一下吗？比如method里面的东西。谢谢。 - Choy

onFileChange 方法接受事件作为参数，每当文件发生更改时，就会触发该事件。 input type = file 具有 files 属性，它是当前持有的文件列表。这是一个单文件输入，所以我将其限制为第一个元素 0。如果没有文件，则它将返回未定义值，从而清除图像；否则，它将指向用户的图像。 然后，我使用浏览器原生的 URL.createObjectURL() 创建此本地文件的对象 URL，并将其用作图像的 src 属性。 - wafs

<input type="file" @change="onFileChange($event)" /> - user12883832

在 this.url = URL.createObjectURL(file); 这行代码的下一行，添加以下代码以清除浏览器内存，防止内存泄漏：URL.revokeObjectURL(file)。 - redshift

这个在<b-upload />上也能用吗？ - Rheza001

很棒的解决方案。补充一下 @redshift 的观点，即 URL.revokeObjectURL(file)。直接来自文档，“当文档卸载时，浏览器将自动释放对象 URL；然而，为了实现最佳性能和内存使用，如果有安全的时间可以显式卸载它们，您应该这样做。” 来源 https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL#usage_notes - Alphy Gacheru