获得表单自定义上传文件信息（视频，图片）

案例：
html

<form id="myForm" action="" method="post">
    名字 :<input type="text" name="name">
    密码 :<input type="password" name="psw">
    上传视频和文件：<input type="file" name='file' id='two' ref='file'>
</form>
<button class="one">提交</button>
<button class="three">清空文件信息</button>

js

<script>
    $('.one').click(function(){
        //这是获得已经存在的表单数据
        var form = document.getElementById("myForm");
        var formData = new FormData(form);
        // 我们可以根据name属性来访问表单中的字段
        var name = formData.get("name"); // 获取名字
        var psw = formData.get("psw"); // 获取密码
        var file = formData.get("file");// 获取文件信息
        console.log('已存在表单信息')
        console.log(name?name:'空')
        console.log(psw?psw:'空')
        console.log(file?file:"空")
       //这是设置的表单数据
        var formData1 = new FormData();
       // 我们可以根据name属性来访问表单中的字段
        formData1.append("name",'胡云溪'); // 设置名字
        formData1.append("psw",'huyunxi'); // 设置密码
        formData1.append("file",'设置的表单文件信息');// 设置文件信息
        var name1 = formData1.get("name"); // 获取名字
        var psw1 = formData1.get("psw"); // 获取密码
        var file1 = formData1.get("file");// 获取文件信息
        console.log('设置表单信息')
        console.log(name1)
        console.log(psw1)
        console.log(file1)
    })
    //不同方法获得文件信息，在vue中使用
    $('#two').click(function($event){
      //知道$event是什么
      console.log('$event',$event)
      //触发这个事件的元素是什么
      console.log('$event.target',$event.target)
      //触发这个事件元素的文件信息
      console.log('$event.target.files[0]',$event.target.files[0])
    })
    $('.three').click(function(){
        //清空文件信息
        $('#two').val('')
       //vue获取input框中的files属性,清空文件信息
      //this.$refs.xxx.value='',在vue中this指的是vue整体。
    })
</script>

方法一：
结果一，初始化：

结果二，有数据：

方法二：
初始化：

有数据：

二、在 vue获取input框中的files属性
template中：

<input type="file" ref="img"  @change="addImg" name="file">

methods中：

addImg(){
       console.log(this.$refs.img.value)
},

我推荐这篇文章FormData用法详解：https://blog.csdn.net/zqian19...，写的很详细