javascript - 显示以前上传的文件或图像

Question

我有两个数据表，在后端使用 Django，在前端使用 Vuejs。(1) 产品，存储产品详细信息和单个图像。(2) Products_Images，存储与产品相关的多张图片。

在编辑产品详细信息包括添加图像或删除图像时，从 <产品列表> 调用以下代码。

我的问题是在编辑模式下我需要显示以前选择的而不是（没有选择文件）

<!-- Edit a Product (Start) -->
<template id="product-edit">
<div>
<h2>Product (Edit)</h2>
<form method="post" enctype="multipart/form-data" ref="itemMaster">

    <!-- Display Product Name -->
    <div class="form-group">
        <input class="form-control" id="edit-name" v-model="product.itemfullhd" required/>
    </div>

    <!-- Upload Single Image -->
    <div class="form-group">
                    <!-- ### MY PROBLEM HERE ### -->
        <label for="edit-imagemain">Main Image </label>
        <input type="file" id="edit-imagemain" v-model="product.Image_file" @change="onFileChanged" required/>
        <img class="cart-thumbnail" v-bind:src="'/media/' + product.image_file" alt="image"/>
    </div>
    <!-- Upload Multiple Images -->
    <div class="form-group">
                    <!-- ### MY PROBLEM ALSO HERE ###  -->
        <label for="files">Xtra Images</label>
        <input type="file" id="files" ref="files" multiple v-on:change="handleFilesUpload()"/>
        <div>
                    <!-- Display the Multiple Images -->
        <table class="table table-striped ">
            <thead>
                <tr>
                    <th>Xtra Image File/s</th>
                    <th>Image</th>
                    <th>Delete</th>
                </tr>
            </thead>
                <tbody>
                    <tr v-for="imagerec in products_images" and v-if="( imagerec.itemfullhd == product.itemfullhd )" style="clear: both;">
                        <td>/media/{{imagerec.images_multiple}}</td>
                        <td> <img class="cart-thumbnail" v-bind:src="'/media/' + imagerec.images_multiple" alt="image"/> </td>
                        <td> <input type="checkbox" :value="imagerec.mark" number> </td>
                    </tr>
                </tbody>
        </table>
        </div>
    </div>
    <button type="submit" class="btn btn-primary" @click.prevent="updateProduct">Save</button>
    <a class="btn btn-dark"><router-link to="/product-list">Cancel</router-link></a>
</form>
</div>
</template>
<!-- Edit a Product (Done) -->

    <script>

    var store = new Vuex.Store({
        state: {
            products: [],
            products_images: [],
        },
        mutations: {
            loadProducts: (state, {products, products_images}) => {
                state.products = products;
                state.products_images = products_images;
            },
        },
        actions: {
            retrieveProducts: ({ commit }) => {
                axios.get('/biggmount_home/Show-Items-Axios')
                .then(response => {
                    products = response.data.md_items_qs2; // send by views.py
                    products_images = response.data.md_items_images_qs2; // send by views.py
                    commit('loadProducts', {products, products_images})
                })
                .catch(error => {
                    alert("ERROR")
                    commit('ERRORED', error)
                })
                // AXIOS method - End
            },
        },
    })

    function findProduct (productId) {
        return products[findProductKey(productId)];
        };

    function findProductKey (productId) {
        for (var key = 0; key < products.length; key++) {
            if (products[key].id == productId) {
                return key;
                }
            }
        };

    var ProductEdit = Vue.extend({
        template: '#product-edit',
        data: function () {
            return {
                product: findProduct(this.$route.params.product_id),
                selectedImage: null,
                // image_file: product.image_file,
                // files: products_images.images_multiple,
                selected: [],
            };
        },
        methods: {
            onFileChanged (event) {
                this.selectedImage = event.target.files[0]
                this.product.image_file = this.selectedImage.name
            },
            /* Handles a change on the file upload */
            handleFilesUpload(){
                this.files = this.$refs.files.files;
                this.image_file = this.$refs.files.files;
            },
            updateProduct: function () {
                let product = this.product;
                const formData = new FormData()
                    if (this.selectedImage != null) {
                        formData.append('Item Image', this.selectedImage, this.selectedImage.name)
                    } else {
                        formData.append('Item Image', [])
                    }
                if (this.files != null) {
                    /* Iterate over any file sent over appending the files to the form data. */
                    for( var i = 0; i < this.files.length; i++ ){
                        let file = this.files[i];
                        formData.append('Item Images', file);
                    }
                } else {
                    formData.append('Item Images', [])
                }
                formData.append('Item Id', product.id)
                formData.append('Item Name', product.itemfullhd)
                formData.append('Item Imagefl', product.imagefl)
                axios.post('/biggmount_home/Post-Items-Axios', formData)

                products[findProductKey(product.id)] = {
                    id: product.id,
                    itemfullhd: product.itemfullhd,
                    imagefl: product.imagefl,
                    image_file: '/biggmount_shop/images/' + this.selectedImage.name,
                    std_rte: product.std_rte,
                };
                router.push('/product-list');
            },
        }
    });

    const app = new Vue({
        router,
        store,
        methods: {
            ...Vuex.mapMutations([
                'loadProducts',
            ]),

            ...Vuex.mapActions([
                'retrieveProducts'
            ]),
        },
        computed: {
            ...Vuex.mapState([
                'products',
                'products_images',
            ]),
        },

        mounted() {
            this.retrieveProducts()
         },

    }).$mount('#app')
    </script>

标签： javascripthtmldjangovue.js