Question

我创建了一个页面，您可以上传多个图片，如果您不想要图像，那么您可以点击X，它将被删除。我遇到的问题是，即使图像被删除，如果我保存表单，删除的图像也会保存在我的数据库中。我使用的是Laravel 5.5和Vue 2.我使用了shoyuVan CodePen的笔作为我的图像的基础

我的Frames.js

   <template>
    <div class="content-form">
        <form @submit.prevent="submit(data)" enctype="multipart/form-data" ref="myFileInputForm">
            <div class="form-group">
                <label>Title</label>
                <input type="text" id="title" class="form-control" name="title" v-model="model.title">
            </div>

            <div class="form-group">
                <input type="file" name="image[]" multiple="multiple" ref="fileInput"  @change="funGetFiles">
            </div>

            <div class="image" :style="'background-image:url(' + value.base64 + ')'" v-for="value in filePreview">
                <button type="button" title="delete" @click="funDeleteFile(value.index)" class="delete"></button>
                <p class="name">{{value.name}}</p>
            </div>
            <label for="fileInput" id="labelInput"></label>

            <input type="submit" class="btn btn-primary" value="Submit">
        </form>
    </div>
</template>

<script>

    export default {

        props: [
            'data',
            'images'
        ],

        mounted() {
            if(this.data){
                Object.assign(this.model, this.data);
            }
        },

        data() {
            return {
                model: {
                    id: '',
                    title: '',
                },

                fileFilter: [],
                filePreview:[],
                responseText:[],
            }
        },

        methods: {
            funGetFiles(e){

                var files = e.target.files || e.dataTransfer.files;

                this.fileFilter = this.fileFilter.concat(this.filter(files));

                this.onSelect(this.fileFilter)
            },

            filter(files){       
                var arrFiles = [];
                for (var i = 0, file; file = files[i]; i++) {
                    // File format filtering
                    if (file.type.indexOf("image") == 0) {
                        // File size filtering
                        if (file.size >= 5120000) {
                            alert("Image size is too large, should be less than 5000k");    
                        } else {
                            arrFiles.push(file);    
                        }           
                    } else {
                        alert('file' + file.name + 'Not a picture');    
                    }
                    //Add a unique index value
                    file.index = i;
                }
                return arrFiles;
            },

             onSelect(files){
                // Clear preview
                this.filePreview = []
                var vm = this
                var i = 0
                function funAppendImage() {
                    var file = files[i];
                    if (file) {
                        var reader = new FileReader()
                        reader.readAsDataURL(file);
                        reader.onload = function(e) {
                            var cacheOb = {}
                            cacheOb.base64 = e.target.result
                            cacheOb.name = file.name
                            cacheOb.size = file.size
                            cacheOb.index = file.index
                            cacheOb.progress = 0
                            vm.filePreview.push(cacheOb)
                            i++
                            funAppendImage()
                        }
                    }
                }
                funAppendImage()
            },

            funDeleteFile(index){
                console.log('delete'+index)
                this.fileFilter.splice(index,1)
                this.filePreview.splice(index,1)
                //Re-order, delete the file update view
                var cacheFiles = []
                for (var i = 0, file; file = this.fileFilter[i]; i++) {
                    //Add a unique index value
                    file.index = i;
                    cacheFiles.push(file)
                }
                this.fileFilter = cacheFiles
                this.onSelect(this.fileFilter)
            },

            save(){

                let imageArray = this.$refs.fileInput.files;

                var formData = new FormData();

                var config = {
                    onUploadProgress: function(progressEvent){
                        var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);

                        console.log('percentCompleted', progressEvent);

                        this.currentProgress = percentCompleted
                    }
                }

                formData.append('title', this.model.title);
                for(let i = 0; i < imageArray.length; i++){

                    formData.append('image[]', imageArray[i])
                }

                if(this.id){
                    formData.append('_method', 'PUT');
                    return axios.post('/frames/'+this.id, formData);
                }else{
                    return axios.post('/frames/', formData, config);
                }
            },

            submit(){
                this.save().then(function(response){
                            // window.location = response.data.redirect;

                        });
            },
        }
    }
</script>

<style lang="scss">
 #labelInput{
        width: 150px;
        height: 150px;
        border: 1px dashed #ccc;
        position: relative;
        background-size: contain;
        background-position: 50%;
        background-repeat: no-repeat;
        display: block;
        float: left;
    }
    #labelInput:hover{
        cursor: pointer;
    }
    #labelInput:after,#labelInput:before{
        height: 1px;
        width: 100px;
        content: "";
        background-color: #ccc;
        display: block;
        position: absolute;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        left: 50%;
        top: 50%;
    }
    #labelInput:before{
        width: 1px;
        height: 100px;
    }
    .clearfix:after{
        content: '';
        clear: both;
        display: table;
    }
    .image{
        width: 150px;
        height: 150px;
        margin: 0 20px 20px 0;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        border: 1px dashed #ccc;
        position: relative;
        float: left;
    }
    .image>.name{
        position: absolute;
        bottom: 0;
        text-align: center;
        width: 100%;
        margin: 0 0 2px 0;
        color: #eee;
        text-shadow: 1px 0 1px #e27474, 0 1px 1px #e27474, 0 -1px 1px #e27474, -1px 0 1px #e27474;
    }
    .delete{
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA8klEQVRYR+2W2w3DIAxFzaRtNvAmeIMmk6ZyRSSUGPwIUvoBf5Gw7+Fi4yR4eKWH9WECTAf+3wFEfKeU9pzz5ukYa1zXAU4CAJ8ivBLRYoFAxBUAXmXvQkT8LS4PACdQIU7iHBMH4GghYRNC2LsREbvYXKYitEBExJnKBKA5ERV3AbQgyiGOguNtqu31fZgdOIKE09b5XOJuBxQIt/hoALVFpVYYfQVuCBeAVO3lVHURuiDMAL1Ws7wToae4U3SXgotCqA54HpkIhHcYqa02dBidxrEq3riy29PwN816M10qsAKvxqk1YPkBubNnAkwHpgNflf+WIapfg7AAAAAASUVORK5CYII=);
        display: block;
        width: 32px;
        height: 32px;
        position: absolute;
        right: -16px;
        top: -16px;
        background-color: transparent;
        border:none;
    }
    .delete:hover{
        transform: rotate(360deg);
        transition: all 2s;
        cursor: pointer;
    }
    .progress{
        position: absolute;
        width: 100%;
        height: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        line-height: 150px;
        color: #fff;
      text-align:center;
    }
</style>

Answer 1

<input type="file">中的文件是只读的。

ShoyuVan的笔可以通过将它们保存在一个单独的数组中来解决这个问题：fileFilter

如果您更改此行：

let imageArray = this.$refs.fileInput.files;

到

let imageArray = this.fileFilter;

文件将按预期提交。

获取要在vue中删除的图像预览

1 个答案: