在vue.js中以动态形式添加图片

时间:2019-09-10 16:56:42

标签: javascript vue.js laravel-5

我正在创建一个应用程序,用户可以在其中以动态形式添加多个车辆信息。

https://i.stack.imgur.com/QgVwU.png

我可以获取除image以外的row数组中的所有车辆信息。当用户以一种形式上传图像时,我想在rowname的regname上添加Image Name。我可以在vuejs中上传图片,但是不了解如何以动态形式上传图片。如何将图片信息明智地推入数组索引

<template>
    <div>
        <div v-for="(row,index) in rows" :key="index">
            <input v-model="row.type" type="text">
            <input v-model="row.model" type="text">
            <input class="file-input" type="file" v-on:change="onPhotoChnage">
            <button @click="deleteRow(index)"></button>
        </div>
        <button @click="addRow">Add vehicle</button>
    </div>
</template>
<script>
export default {
    props: ['data'],
    data() {
        return {
            rows: [{
                'type': '',
                'model': '',
                'regname': '',
                'reg': '',
            }],
            methods: {
                addRow: function() {
                    this.rows.push({ 'type': 'Sedan Car', 'model': '' });
                },
                deleteRow(row) {
                    this.rows.splice(row, 1);
                },
                onRegChnage(e) {
                    let file = e.target.files[0];
                    this.rows[2]=file.name
                    let reader = new FileReader();
                    reader.onload = (file) => {
                        this.rows[3]= reader.result;
                        reader.readAsDataURL(file);
                    },
                }
            }
        }
    }

</script>

0 个答案:

没有答案