vue+el-upload实现文件上传

2022年6月8日14:35:16

vue+el-upload实现文件上传:

项目中遇到过需要文件上传的情况,在此简单举例单文件上传方法。


步骤:

首先了解element中的el-upload组件,本次代码选择在选取文件后自动上传的方式。

1、 搭建文件上传组件
(accept=".xlsx, .xls"限制了只能选择excel文件)
( :http-request="uploadHttpRequest"是自定义上传方法)
( :limit="1"限制选择一个文件)
(:on-remove="handleRemove"文件列表移除文件时方法)

<el-uploadref="uploadplan"class="upload-demo"action=""accept=".xlsx, .xls":on-remove="handleRemove":http-request="uploadHttpRequest":limit="1":file-list="fileList"><el-buttontype="primary"size="small">
                上传</el-button></el-upload>

2、 在data中声明文件上传列表

data(){return{
      fileList:[],//上传的文件列表}}

3、 自定义上传方法
------------------注意看代码后的注释------------------

 methods:{//自定义上传方法uploadHttpRequest(param){
      console.log(param.file);//查看是否选取到文件let formData=newFormData();//FormData对象,添加参数只能通过append('key', value)的形式添加
      formData.append("id",this.tid);//添加id(这里是项目需要,根据个人情况选择是否添加)
      formData.append("xxxFile", param.file);//添加文件对象this.$axios.post("这里写接口地址",formData,{
           headers:{"Content-Type":"multipart/form-data",//配置header,我们上传的文件编码格式就是multipart/form-data},}).then((res)=>{
          console.log(res)})},//  文件列表移除文件时的钩子handleRemove(file, fileList){this.$message.warning("文件已移除");},}

如有不足欢迎指出,本人也是自己瞎摸索出来

  • 作者:zyynb
  • 原文链接:https://blog.csdn.net/zyynb/article/details/123223064
    更新时间:2022年6月8日14:35:16 ,共 1091 字。