添加 event.target.files 上传到现有的 img 元素

Question

添加第一张图片后，下一个输入字段不会填充未来的文件，当前图片将替换为下一个上传的文件，即使动态添加了新的 img 元素也是如此。如何将每个上传的图像放在新动态创建的 img 元素中？我查看了围绕这个问题的多个答案，但 none 的解决方案适合我的需要。我使用 alpine 来实现大部分功能，但我愿意接受任何 Vanilla JavaScript 解决方案。没有 jQuery 请谢谢。

<div class="mt-4" x-data="{show: false }">
       click yes button
        <x-radio
           
            @click="show = true"
            name="as_ws_content"
            type="radio"
            value="yes"
        />yes

        <x-radio 
            
            @click="show = false"
            name="as_ws_content"
            
            type="radio"
            value="no"
            
        />no
        
        <div x-data="addRemovePicture()" x-show="show" >

            
            <x-button @click="addNewFieldPicture()"> 
                add picture
            </x-button>
           

            <template x-for="(picture, index) in picturesInput">
                <div>
                    <input type="file">
                    <img  id=""  alt="">


                </div>
            </template>
            
        </div>
    

    </div>

    <script>
        function addRemovePicture() {
            return {
                picturesInput: [],
                addNewFieldPicture() {
                    var length = this.picturesInput.push({id: this.picturesInput.length});
            
                },

            }
        }
    </script>

Answer 1

    <html>
        <head>
            <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
        </head>
        <body>
            <div>
                <div>
                    <div x-data="addPictureDiv()">
                        <button onclick="event.preventDefault();"  @click="addNewFieldPicture()"> 
                            add picture
                        </button>   
                        <template x-for="(picturefield, index) in picturefields" :key="picturefield.id">
                            <div x-data="imageViewer()">
                                <div>
                                    {{-- x-if defines our {initField : initVariable} --}}
                                    <template x-if="imageUrl">
                                        <img :src="imageUrl">
                                    </template>
    
                                    {{-- Image file selector --}}
                                    <input id="pictureInput" type="file" name="imageName[]" multiple accept="image/*" @change="fileChosen">
                                    <button type="button" @click="removeNewFieldPicture(picturefield)">&times;</button>
                                    {{-- fileChosen is method we will call upon selecting an image to load --}}
                                </div>
                            </div>                                  
                        </template>
                    </div>
                </div>
            </div>
            <script>
                // returns a new Object instance return {initField: initVariable}
                function imageViewer(){
                    return{
                        imageUrl: '',
                        
                        // fileChosen will grab our selected image and turn it into a url
                        fileChosen(event) {
                            this.fileToDataUrl(event, src => this.imageUrl = src)
                        },
        
                        fileToDataUrl(event, callback) {
                            if (!event.target.files.length) {
                                return
                            }
        
                            let file = event.target.files[0]
    
                            reader = new FileReader();
                            
                            reader.readAsDataURL(file)
                            reader.onload = e => callback(e.target.result)
                            
                        }
        
                    }             
                }
                function addPictureDiv() {
                    return {
                        picturefields: [],
                        
                        addNewFieldPicture() {
                            this.picturefields.push({id: new Date().getTime() + this.picturefields.length});
                        },
        
                        removeNewFieldPicture (picturefield) {
                            this.picturefields.splice(this.picturefields.indexOf(picturefield), 1);
                        }
        
                    }
                }
            </script>      
        </body>
    </html>

添加 event.target.files 上传到现有的 img 元素

add event.target.files upload to existing img element

javascript

alpine.js