vue 使用 el-upload 上传文件(自动上传/手动上传)-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 使用 el-upload 上传文件(自动上传/手动上传)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue 使用 el-upload 上传文件(自动上传/手动上传)文章来源地址https://www.toymoban.com/news/detail-640548.html

1. 自动上传(选择完文件后,调用axios上传)

<el-upload
  ref="upload1"
  action
  :multiple="false"
  accept=".xlsx,.csv,.xls"
  :auto-upload="false"
  :on-change="handleFileChange"
  :show-file-list="false"
>
  <el-button type="success" icon="el-icon-upload2">导入</el-button>
</el-upload>

上传

 // 当开启多选时 filelist有值
 async handleFileChange(file, filelist) {
  this.httpImportFile(file.raw);
},
httpImportFile(file) {
  let formDatas = new FormData();
  formDatas.append("file", file);
  apiImport(formDatas).then((res) => {
      this.$message.success("导入成功");
      this.$refs.upload1.clearFiles();
    }).catch((err) => {});
},

2.手动上传

<el-upload 
    ref="upfile"
    :auto-upload="false"
    :on-change="handleChange"
    :file-list="fileList"
    :multiple="true"
    accept=".xlsx,.csv,.xls"
    action="#">
    <el-button  type="success">选择文件</el-button>
</el-upload>

<el-button  type="success" @click="upload">点击上传</el-button>

上传

export default {
    data(){
        return{
            fileList:[]
        }
    },
    methods:{
        //获得文件列表
         handleChange(file, fileList) {
            this.fileList = fileList;
        },
        upload(){
            let fd = new FormData();
            this.fileList.forEach(item=>{
                //文件信息中raw才是真的文件
                fd.append("files",item.raw);
            })
            apiImport(fd).then(res=>{
                if (res.code === 200) {
                    this.$message('上传成功')
                }else{
                    this.$message('失败')
                }
            })
        },
    }
}