Vue实现上传文件

本文已参与「新人创作礼」活动，一起开启掘金创作之路

在日常需求中 VUE要使用上传文件到后端是很常见的功能 那我们应该咋实现它呢

其实这很简单 我们可以使用element这个前端工具 这是一个饿了么团队开发的一个桌面成型工具 有需要的同学可以自行百度一下

话不多说 现在就来一步步教你实现 VUE如何上传文件到服务端

首先我们直接用el-upload组件就可以实现了

代码如下：

<el-form-item>

<el-upload

  class="avatar-uploader"

drag

  action="111"

  style="margin-left: 70px"

  :show-file-list="true"

  :http-request="file"

  :before-upload="beforeAvatarUpload">

  <i class="el-icon-upload"></i>

  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

</el-upload>



   </el-form-item>
   
   
   

这个组件有几个重要参数

1.class 这个是上传组件的样式 我为了方便直接用官方的就好了

2.drag 是否允许拖动

3.:http-request="file" 这个是自定义上传的实现 就是你把选择好文件 就会通过这个方法去对文件进行上传操作

4. :before-upload="beforeAvatarUpload" 这个参数提供一个方法是上传之后你想要做什么处理

下面是文件处理的代码是在sciprt里

 async file(params) {

          const _this = this

          var formData = new FormData();

         formData.append('file', params.file);

		 this.$axios.post(  'http://localhost:8568/upload/yun',formData).then(function (response) {

	  _this.ruleForm.fileurl=response.data.data.filePath

	   console.log(response)


})

},

      beforeAvatarUpload(file) {

      }

首先是用户通过在el-upload自定义的上传方法file

这是一个异步的方法 它需要传入一个参数

然后创建一个FormData对象 这是一种格式一般是用来进行文件上传的 然后在我们创建的formData对象里追加我们要上传的文件 然后再通过axios的post方法（为什么是post方法 因为我们是上传数据 不是获取数据）去发送到我们的服务端 这就完成了上传的方法

而因为我并不想对上传文件之后有什么想法 所有就为空就好了 不过如果想做什么操作的 可以通过file方法返回一个布尔值来让beforeAvatarUpload明确之后是否进行操作