点击按钮实现文件导入/文件上传

羊毛卷少女_lu

于 2024-08-20 17:59:44 发布

阅读量464

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44201656/article/details/141364819

版权

          <el-upload
            ref="upload"
            :accept="上传什么类型的文件"
            action="faker"
            :limit="1"
            :show-file-list="false"
            :on-change="handleChange"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false"
            :before-upload="beforeUpload"
          >
            <el-button size="small">导入文件</el-button>
          </el-upload>
      handleChange(file,fileList){
         let testmsg=file.name.substring(file.name.lastIndexOf('.')+1);
         const extension = testmsg === 'xls'
         const extension2 = testmsg === 'xlsx'
         if(!extension && !extension2){
            this.$message.warning("上传文件只能是 xls、xlsx格式");
            window.setTimeout(() => this.$refs.upload.clearFiles(), 1000);
            return
         }
         const isLt2M = file.size / 1024 / 1024 < fileManagementFileSize
         if(!isLt2M){
           this.$message.warning('上传文件大小不能超过20MB!');
           window.setTimeout(() => this.$refs.upload.clearFiles(), 1000);
           return
         }
         this.fileList = [];
         if (fileList.length > 0) {
          this.fileList = [file];//获取文件流
          const m=this.$message.success('正在导入……','el-icon-loading',0)
          let formData = new FormData();
          formData.append("file", this.fileList[0].raw);
          m.close();
         }
     },
     handleRemove(file, fileList) {
     },
     handlePreview(file, fileList) {
     },
     beforeUpload(file, fileList) {
     }