vue上传文件，实现单选 ，实现递归多选

单选和多选

需求：点击选择按钮，在选择输入框中将选中的文件，显示选择的文件名 逗号隔开，点击上传之后再调用上传接口上传文件

单个文件上传 单选

点击选择之后 获取文件，点击上传调用上传接口

<div flex="cross:center" style="margin-bottom: 25px;padding:0 10px;">
    <div class="chooseFile" flex="cross:center">
        <div>选择文件：</div>
        <div class="chooseF">
            <el-input v-model="fileName" readonly placeholder="请选择文件"></el-input>
             //进度条
             <div class="prose" flex v-if="loading">
                 <div class="name">{{this.fileName}}</div>
                 <el-progress
                    style="width:370px"
                    :format="format"
                    :stroke-width="8"
                    :percentage="progressPercent"
                ></el-progress>
             </div>
            
        </div>
    </div>
    <div class="inputBox">
        <el-button class="dioSave btnCancel seR">选择..</el-button>
        <input type="file" id="fileId" ref="fileId" title @change="upLoadFile($event)" />
    </div>
    <el-button class="dioSave" @click="saveDio()">上传</el-button>
</div>

<style lang='scss' scoped>
.inputBox {
    position: relative;
    .seR {
        margin-right: 30px;
    }
    input {
        position: absolute;
        right: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
}
</style>

//点击选择
upLoadFile(e) {
    var file = e.target.files[0];
    this.fileName = file.name;
    this.fileSize = file.size;
    var form = {};
    form = new FormData();
    form.append('file', file);
    this.formMessage=form

},
//点击上传
 saveDio() {
   this.upFileWen(this.formMessage)
},
upFileWen(form) {
    var that=this
    this.loading = true;
    let config = {
        timeout: 0,
        //onUploadProgress  进度条
        onUploadProgress: function (progress) {
            that.progressPercent=Math.round((progress.loaded * 100) / progress.total)
        }.bind(this)
    };
    //this.upDaima + 'api/File/UpLoadFile'  url上传到路径
    this.$axios.post(this.upDaima + 'api/File/UpLoadFile', form, config).then((res) => {
        if (res.status == 200) {
            this.guidName = res.data[0].Name;
            this.filepath = res.data[0].URL;
            this.$refs['fileId'].value = '';
            this.loading = false;
            this.progressPercent=0
            //上传接口
            this.getAddDesignFile()
        } else {
            this.loading = false;
            this.progressPercent=0
            this.$message.error('上传失败');
        }
    });
},
getAddDesignFile() {
     let params = {
         design_id: this.file_design_id,
         fileName: this.fileName,
         filepath: this.filepath,
         guidName: this.guidName,
         fileSize: this.fileSize,
         remark: '',
         user_id: localStorage.getItem('user_id')
     };
     AddDesignFile(params).then((res) => {
         let { ReturnCode, Data } = res;
         if (ReturnCode == 200) {
            
             // 刷新列表  显示文件名清空
             this.fileName = '';
                 
         }
     }).then(()=>{
         
     });
 },

多个文件上传 多选

这里的多选是选择多个文件 递归上传文件，不能用循环，会出现问题，输入框加一个属性 multiple

<div flex="cross:center" style="margin-bottom: 25px;padding:0 10px;">
    <div class="chooseFile" flex="cross:center">
        <div>选择文件：</div>
        <div class="chooseF">
            <el-input v-model="fileName" readonly placeholder="请选择文件"></el-input>
             
             <div class="prose" flex v-if="loading">
             //多个名字 逗号分割
                 <div class="name">{{this.fileName.split(',')[this.j]}}</div>
                 <el-progress
                 
                    style="width:370px"
                    :format="format"
                    :stroke-width="8"
                    :percentage="progressPercent"
                ></el-progress>
             </div>
            
        </div>
    </div>
    <div class="inputBox">
        <el-button class="dioSave btnCancel seR">选择..</el-button>
        //multiple  属性  多选
        <input type="file" id="fileId" ref="fileId" multiple title @change="upLoadFile($event)" />
    </div>
    <el-button class="dioSave" @click="saveDio()">上传</el-button>
</div>

如下，如果接口不支持多文件上传，就设置递归一个一个单文件上传

下面是代码

//点击选择
upLoadFile(e) {
   //多个文件
   var files = e.target.files;
    this.fileSize=[]
    //拼接名字  逗号拼接
    for (let i = 0; i < files.length; i++) {
        this.fileName += files[i].name + ',';
          this.fileSize.push(files[i].size);
    }
    // 去掉最后的  逗号
    if (files.length >= 1) {
        this.fileName = this.fileName.substr(0, this.fileName.length - 1);
    }

    this.files = files;
},

//点击上传
saveDio() {
      //递归 设置全局 j=0
    if(this.j>=this.files.length){
         this.j=0
         // 刷新列表
          this.$message.success('保存成功');
         this.fileName = '';
         this.fileSize=[]
         return
     }
         var form = new FormData();
         form.append('file', this.files[this.j]);
         this.upFileWen(form);
 },
 upFileWen(form) {
    
     var that = this;
     this.loading = true;
     let config = {
         timeout: 0,
         onUploadProgress: function (progress) {
             that.progressPercent = Math.round((progress.loaded * 100) / progress.total);
         }.bind(this)
     };
     this.$axios.post(this.upDaima + 'api/File/UpLoadFile', form, config).then((res) => {
         if (res.status == 200) {
             this.guidName = res.data[0].Name;
             this.filepath = res.data[0].URL;
             this.loading = false;
             this.progressPercent = 0;
             //上传接口
             this.getAddDesignFile(form,index);
         } else {
             this.loading = false;
             this.progressPercent = 0;
             this.$message.error('上传失败');
         }
     });
 },
 getAddDesignFile(form) {
    let params = {
        design_id: this.file_design_id,
        fileName: this.fileName.split(',')[this.j],
        filepath: this.filepath,
        guidName: this.guidName,
        fileSize: this.fileSize[this.j],
        remark: '',
        user_id: localStorage.getItem('user_id')
    };
    AddDesignFile(params).then((res) => {
        let { ReturnCode, Data } = res;
        if (ReturnCode == 200) {
           
           this.j++;
           this.saveDio()
                
        }
    }).then(()=>{
        
    });
},

参考 https://www.bianchengquan.com/article/66908.html