vue使用input上传图片、视频、音频等文件

---

1：构建html

1：先创建一个文件类型的 input 元素。

<input type="file" accept="image/png,image/jpeg,image/jpg,image/gif"
				   ref="selectFile"
				   name="wenjian"     
				   @change="checkFile($event)"
				   hidden />

先解释下它的所有属性：

• type 的值是 file，表示我们要上传文件类型。
• accept ：表示接受什么类型的文件。如果你不清楚如何写可以参考： MIME参考手册,当然你也可以自行百度 MIME。上面我写的是可以接受png、jpeg、jpg、gif格式的图片。
• ref ：表示给当前这个 input DOM元素注册一个信息，后面我们可以通过 this.$refs.selectFile 对这个元素进行操作。
• name： 必要的属性，给这个 input 起一个名称。
• @change ：当这个input失去焦点，并且值发生改变时触发的事件。
• hideen：将当前这个上传选择文件隐藏起来。

然后创建一个你喜欢的元素用来点击触发这个input来选择文件

<div @click='selectFile'>点我div>

• @click：点击就会触发的事件。

2：js

因为我们已经将文件的 input 隐藏了，所以我们需要通过 div 的点击事件来触发 input 的事件

 div 的点击事件函数
selectFile () {
     
	 此时就用到了我们上面所说的 this.$refs 
    this.$refs.selectFile.click()  // 这样就会触发 文件的选择
}

当选择完文件后就会触发 input 的 change 事件了，我们通过 $event 事件中心来获取我们选择的文件

 input 的 change 事件函数
checkFile (e) {
     
	得到你选择的那个文件
	const file = e.target.files[0]
	得到文件名称
	const fileName = file.name
	得到文件后缀
	const fileExt = file.name.split('.').pop().toLocaleLowerCase()
}

3：转化为formdata格式

虽然你获取到了你想要上传的文件，但是这个格式是不能提交到后台的。
我们需要把他转化为 formdata 格式才可以上传到后台。

创建一个formdata的实例
let data = new FormData()
将你的文件存储进去
data.append(file(后台需要的参数名称), file（你的文件存放的变量）)
当然，如果你需要传递多个参数，你可以使用循环来以此将你的数据放进去：
Object.Keys(file).forEach((item) => {
     
	data.append(item, file[item])
})