Preview an image before it is uploaded VUEjs
本问题已经有最佳答案,请猛点这里访问。
我知道这个问题已经被问到了。 但我不知道如何在vuejs中使用代码。 我尝试了很多,但没有任何结果。
我还添加了我的代码。
有人可以帮帮我吗? 这是我的代码。
谢谢
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <template> <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> |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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)) }) } } } |
请记住,浏览器无法显示所有图像类型(例如:tiff不适用于此方法)。
有几个步骤:
-
使用
@change 侦听器输入文件 - 在onChange中,您可以创建一个对象URL
- 使用此URL显示图像
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const vm = new Vue({ el: '#app', data() { return { url: null, } }, methods: { onFileChange(e) { const file = e.target.files[0]; this.url = URL.createObjectURL(file); } } }) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | body { background-color: #e2e2e2; } #app { padding: 20px; } #preview { display: flex; justify-content: center; align-items: center; } #preview img { max-width: 100%; max-height: 500px; } |
1 2 3 4 5 6 | <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"> <input type="file" @change="onFileChange" /> <img v-if="url" :src="url" /> |