单选和多选
需求：点击选择按钮，在选择输入框中将选中的文件，显示选择的文件名 逗号隔开，点击上传之后再调用上传接口上传文件
单个文件上传 单选
点击选择之后 获取文件，点击上传调用上传接口
<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-progressstyle="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=thisthis.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=0this.$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-progressstyle="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=0if(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(()=>{});},
参考 /article/66908.html
