在vue中实现导入功能（el-upload的使用）

1.使用el-upload组件

 

                

                     //文件列表移除文件时的钩子

                    

                     请选择文件

                    

              

            



             


              确定导入                 

              取消

            

2.定义数据

data(){

return {

        fileList:[],  //文件列表

        file:{},

        uploading:true, //默认置灰确定导入按钮

}}

2.填写上传方法

    handleChange(file) {     //文件状态改变触发

    this.uploading = false;

    this.file = file;

    },

    handleExceed() {           //文件超出个数限制

    this.$message.warning("仅允许上传一个文件！");

    },

    handleRemove() {        //移除文件

    this.uploading = true;

    },

    cancle() {                        //取消

    this.file = {};

    this.fileList = [];

    this.dialogFormVisible = false;

    this.uploading = true;

    },

    handleImportExcel(){           //导入excel

        if (!this.file.size) {

            this.$message.warning("请选择上传的文件");

            return;

        }

        this.uploading = true;

        let formData = new FormData();   ///通过FormData将文件转成二进制数据

        formData.append("excel", this.file.raw);

        this.$http.post('............后台的api',formData).then(({data:res})=>{

            this.uploading = false;

            if(res.code === "0"){

            this.$message.success(res.msg)

            }else{

            this.$message.error(res.msg)

            }

        }).catch(() => {})

       },