vue+Element上传文件

html页面

     

         
                    
                              class="upload-demo"
                              ref="upload"
                              :action="saveMeals"
                              :file-list="myFileList"
                              :on-remove="handleRemove"
                              :before-upload="beforeUpload"
                              name="meals"
                              :data="mdata"
                              :on-change="fileChange"
                              :on-success="handleUploadSuccess"
                              :auto-upload="false">
                              选取文件
                              只能上传xls/xlsx文件


                              

                                  上传到服务器

                             
                        
          
    

---

vue代码写在单独js文件中

new Vue({
    el : "#uploadDate",
    data : {
        myFileList:[],
        saveMeals:'',

        mdata:{
            corpId:'',
            tName:'meals',
            issue:'',
        },
    },
    created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
        this.saveMeals=saveMealsUrl;//controller地址
    },
    methods:{
        //文件上传前的钩子函数
        beforeUpload(file){//上传前
            let Xls = file.name.split('.');
            if(Xls[1] === 'xls'||Xls[1] === 'xlsx'){
                if(this.selectValue==""){
                    this.$message.error('请选择公司!')
                    return false
                }
                this.mdata.corpId=this.selectValue
                this.mdata.issue=formatTimeToStr(this.selectIssue, "yyyy-MM");
                return file
            }else {
                this.$message.error('上传文件只能是 xls/xlsx 格式!')
                return false
            }
        },
        submitUpload(){//上传餐费
            if(this.myFileList==null||this.myFileList==''){
                this.$message({type:'error',message:"请选择文件！"})
                return false;
            }
            
            this.$confirm('确认要上传餐费吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {

                 this.$refs.upload.submit();
              });   
        },

      // 上传成功的钩子函数

      handleUploadSuccess(response, file, fileList){
            this.$refs.upload.clearFiles();//移除文件，防止重复上传
            this.$message(response);//显示上传结果
        },

        handleRemove(){//移除文件
            this.myFileList=[];
        },
        fileChange(file, fileList){//限制只能选中一个文件
            this.myFileList=fileList.slice(-1);
        },

});