个人中心
gpt4 book ai didi

javascript - 在上传 VUEjs 之前预览图像

转载 作者：搜寻专家 更新时间：2023-10-30 22:08:28 25 4
gpt4 key购买 nike

<分区>

我知道有人问过这个问题。但是我不知道如何使用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>

js

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

25 4 0
文章推荐： php - MySql 整个数据库(表和实体)与备份一起删除。有没有办法重新创建它。
文章推荐： ios - 无法在导航栏中设置左栏按钮项？
文章推荐： swift - 是否有一个 main.swift 相当于 @NSApplicationMain 注释？
文章推荐： javascript - #NUXT.JS 中常用的组件方法存放在哪里
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com