zoukankan      html  css  js  c++  java
  • vue上传文件

    <div>
        <input type="file" class="file"  name="file" @change="uploadBefore">
    </div>
    export default {
    methods:{
                //选择文件
          uploadBefore(){
            var formData = new FormData() // 声明一个FormData对象
            this.formData = new window.FormData() // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
            this.formData.append('file', document.querySelector('input[type=file]').files[0]) // 'userfile' 这个名字要和后台获取文件的名字一样;
            let file = document.querySelector('input[type=file]').files[0]
            console.log(this.fileName)
            let fileName = file.name.substring(file.name.lastIndexOf(".")+1,file.name.length)
            const fileType = fileName == 'xls'||fileName == 'xlsx'||fileName == 'ppt'||fileName == 'pptx'||fileName == 'doc'||fileName == 'docx'||fileName == 'txt'||fileName == 'pdf'||fileName == 'jpg'||fileName == 'gif'||fileName == 'jpeg'||fileName == 'png'||fileName == 'bmp'||fileName == 'mp3'||fileName == 'mp4';
          //   console.log(file)
          //   console.log(fileName)
          //   console.log(fileType)
            if (!fileType) {
              this.$message.error('上传文件格式不正确,请检查');
              this.numberValidateForm.fileName = ""
            }else{
                
           this.numberValidateForm.fileName = file.name
           }
    },   
       // 保存,上传文件
          submitForm() {
                this.saveLoading = true
                     this.$http({
                    url: this.$store.state.domian+'/bbt-admin/courseware/upload/'+dynamicppt,
                    data: this.formData,
                    method: 'post',
                    headers: { 
                      'Content-Type': 'multipart/form-data',
                    }
                }).then((res => {
                   if (res.data.statusCode == 0) {
                     
                      this.$message({message:'操作成功!',type: 'success'})
                      this.dialogTableVisible = false
                      this.getFileList(1);
                   
                   }
                  this.saveLoading = false
                  console.log(res)
                })
                )
             
            });
          },   
    }
    
    
    }
    

      

  • 相关阅读:
    webpack learn2-vue的jsx写法和postcss 1
    浏览器缓存旧的js文件或css文件导致没出现预期效果
    webpack learn1-webpack-dev-server的配置和使用3
    Python正课60 —— configparser模块
    Python正课59 —— json与pickle模块
    Python正课58 —— 小说阅读项目 初级
    Python正课57 —— ATM+购物车 前戏
    Python正课56 —— shutil模块
    Python正课55 —— sys模块
    Python正课54 —— os模块
  • 原文地址:https://www.cnblogs.com/lan-cheng/p/10118613.html
Copyright © 2011-2022 走看看