vue如何实现文件上传

本篇内容主要讲解"vue如何实现文件上传"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"vue如何实现文件上传"吧!

1、使用elementUI的 el-upload插件进行上传。

html:

js:

data() {      return {        AddSubmenuData:{          id:"",          pid:"",          funType:1,          name:"",          sort:"",          SystemCoding:"",          remarks:"",          imageUrl: ''        },      };  },  methods: {      // 获取图片信息并转成base64      handleChange(file, fileList){       let reader = new FileReader();        let fileResult = "";        reader.readAsDataURL(file.raw);        reader.onload = function() {          fileResult = reader.result;        };        reader.onloadend = function() {           this.AddSubmenuData.imageUrl = fileResult        };      }  }

css:

 /deep/  .avatar-uploader .el-upload {      border: 1px dashed #d9d9d9;      border-radius: 6px;      cursor: pointer;      position: relative;      overflow: hidden;      margin-left: 80px;      margin-bottom: 22px;    }    .avatar-uploader .el-upload:hover {      border-color: #409EFF;    }    .avatar-uploader-icon {      font-size: 28px;      color: #8c939d;      width: 178px;      height: 178px;      line-height: 178px;      text-align: center;    }    .avatar {      width: 178px;      height: 178px;      display: block;    }

效果图：

2、使用input进行上传。

1)、html

首先input的type属性要改成file，如果需求是点击按钮在上传文件。可以给input加一个ref="fileInput"，然后通过点击按钮调用input的事件:@click="$refs.fileInput.click()".

      添加

2)、js

获取文件后就可以进行数据处理并调用接口。因为有些时候，上传文件有些是重复的，再次调用方法就是失效，所以，可以在每次上传完之后清除之前上传的文件，这样即使文件相同，也可以重复调用方法。this.$refs.fileInput.value=’’

// 获取文件数据  getFile(event) {//这就是你上传的文件       event.target.files[0]              let formFile = new FormData();        formFile.append("file", event.target.files[0]);        formFile.append("apply_info_id", this.RndNum(12));        formFile.append("file_type", '');        //调用接口        file_upload(formFile).then(res => {          this.addInformation.addPoupTableData.data.push({name:res.data.name,id:res.data.id,size:(event.target.files[0].size/1024).toFixed(0) + "kb",path:res.data.path})          //调用接口后清除文件          this.$refs.fileInput.value=''        }) },

到此，相信大家对"vue如何实现文件上传"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！