文件上传重置数组

Question

附件不断选择上一个文件。如果我选择了 3 个文件，然后再次重新选择 2 个文件，则文件总数变为 5 个而不是 2 个。附件不断添加之前的文件，并且在我想重新选择时不会重置。提前致谢。

模板

<input id="upload-file" type="file" multiple class="form-control" @change="fieldChange">

脚本

<script>
export default {
    data(){
        return{
          year:'',
          attachments:[],
          form: new FormData
        }
    },
    methods:{
        fieldChange(e){
            let selectedFiles=e.target.files;
            if(!selectedFiles.length){
                return false;
            }
            for(let i=0;i<selectedFiles.length;i++){
                this.attachments.push(selectedFiles[i]);
            }
            console.log(this.attachments);
        },
   }
</script>

编辑

同样面临的问题是提交表单后。 form.pics[] 仍然有以前的文件，提交时以前的文件将再次保存在数据库中。我尝试使用 form.pics = [] 重置它，但不起作用。

脚本

 uploadFile(){
            for(let i=0; i<this.attachments.length;i++){
                this.form.append('pics[]',this.attachments[i]);
            }
            this.form.append('year',this.year);
            axios.post('/api/gallery',this.form).then(response=>{
                console.log(response);
                this.form.pics = [];
            })
            .catch(response=>{
                //error
            });
        }

Answer 1

因为您正在推送到附件并且没有重置它。

试试这个

<script>
export default {
    data(){
        return{
          year:'',
          attachments:[],
          form: new FormData
        }
    },
    methods:{
        fieldChange(e){
            this.attachments = []; // added this one
            let selectedFiles=e.target.files;
            if(!selectedFiles.length){
                return false;
            }
            for(let i=0;i<selectedFiles.length;i++){
                this.attachments.push(selectedFiles[i]);
            }
            console.log(this.attachments);
        },
   }
</script>