下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

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

作者:胖胖的妖怪     来源: https://www.cnblogs.com/-moon/p/11375123.html点击数:4329发布时间: 2020-03-01 16:09:15

标签: 计算机Vueweb

Web开发

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

  要把文件上传的web,需要分几步?

  答:三步

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

  <inputtype="file"id="fileExport"@change="handleFileChange"ref="inputer">

  由于是在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,"请求失败的回调,自己看看为啥失败")

  })

  })

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

赞(15)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程