web前端：Vue 实现文件的上传

作者:胖胖的妖怪更新于： 2020-03-01 16:09:11

　　计算机文件属于文件的一种，与普通文件载体不同，计算机文件是以计算机硬盘为载体存储在计算机上的信息集合。文件可以是文本文档、图片、程序等等。文件通常具有三个字母的文件扩展名，用于指示文件类型(例如，图片文件常常以JPEG格式保存并且文件扩展名为.jpg)。

　　要把文件上传的web，需要分几步？

　　答：三步

　　第一步：创建一个上传文件的标签

　　由于是在vue中，考虑到获取节点，所以给标签添加一个ref，方便获取属性并给标签添加事件

　　第二步：改动事件

　　handleFileChange(e){

　　letinputDOM=this.$refs.inputer;

　　this.file=inputDOM.files[0];//通过DOM取文件数据

　　letsize=Math.floor(this.file.size/1024);//计算文件的大小

　　this.formData=newFormData();//new一个formData事件

　　this.formData.append("file",this.file);//将file属性添加到formData里

　　//此时formData就是我们要向后台传的参数了

　　}

　　第三步:上传formData

　　this.$http({

　　url:this.HOST+api.upload,

　　data:formData,//在此处上传文件

　　method:"post",

　　headers:{

　　'Content-Type':'multipart/form-data'//值得注意的是，这个地方一定要把请求头更改一下

　　}

　　}).then(function(res){

　　console.log(res,"此处应该是请求成功的回调")

　　}.catch(function(req){

　　console.log(req,"请求失败的回调，自己看看为啥失败")

　　})

　　})

　　文件有很多种，运行的方式也各有不同。一般来说我们可以通过文件名来识别这个文件是哪种类型，特定的文件都会有特定的图标(就是显示这个文件的样子)，也只有安装了相应的软件，才能正确显示这个文件的图标。