vue项目使用elementUi中Upload 组件批量上传文件并且携带参数(使用axios请求)

tech2025-07-07  3

效果图(点击选取文件可批量选取,点击确认上传可把选好的文件批量上传)

1.组件

<el-upload class="upload-demo" ref="upload" :on-change="changFile" :on-remove="handleRemove" :file-list="fileList" action :auto-upload="false"//不自动上传,(自己手动上传) multiple //可批量多选 accept=".doc, .docx, .zip, .pdf, .xls, .xlsx, .jpg, .png, .jpeg,.ppt"//可选择上传的文件格式 :limit="5"//可上传数量 > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <div slot="tip" class="el-upload__tip" >可上传.doc, .docx, .zip, .pdf, .xls, .xlsx, .jpg, .png, .jpeg,.ppt文件,单个大小不可超过3M,文件个数不能超过5个。</div> </el-upload> ![<el-button type="primary" @click="submitBtn">确认上传</el-button>](https://img-blog.csdnimg.cn/20200904104113612.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQyNDU0OA==,size_16,color_FFFFFF,t_70#pic_center)

2.data

data() { return { fileList: [], uploadForm:null };

3.事件

changFile(file, fileList) { console.log(fileList); //选择文件后,给fileList对象赋值 this.fileList = fileList; }, handleRemove(file, fileList) { //删除文件后,给fileList对象赋值 this.fileList = fileList; }, submitBtn(){ //处理上传前的参数 this.uploadForm = new FormData(); for (let i = 0; i < this.fileList.length; i++) { this.uploadForm.append(`files`, this.fileList[i].raw); } //需要添加的参数都通过append来添加 this.uploadForm.append("peUuid", peUuid); axios.post({ url:'http://xxxxx',//请求地址 data:this.uploadForm,//携带的参数 headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(res=>{ //后端返回的状态数据 }) },
最新回复(0)