文件上传重置数组

Question

The attachments keeps getting the previous file selected. If i selected 3 files, and then re-select again 2 files, the total files becomes 5 not 2. The attachments keeps adding up the files before and not reset when i want to re-select. Thanks in advance.

Template

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

Script

<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>

EDIT

Also facing issues is that after submitting the form. The form.pics[] still has the previous files and when submit the previous files will be saved again in the database. I tried to reset it with form.pics = [] but doesn't work.

Script

 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

Because you are pushing to the attachments and did not reset it.

Try this

<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>