html部分:
<el-button type="primary" v-show="type!=2" @click="updateActivity(1)">保存</el-button>
<div class="uploadBox tx-lf"> <div class="fileBox"> 模板导入 <input type="file" name="commodityFile" id="commodityFile" class="fileBtn" @change="uploadChange" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"> </div> <div class="el-upload__tip">只能上传xlsx文件,且不超过10M</div> <div class="filename">{{fileName}}</div> </div>
css部分:
.fileBox{ width: 48px; height: 14px; padding: 9px 15px; font-size: 12px; position: relative; overflow: hidden; color: #fff; background-color: #409EFF; border-color: #409EFF; border-radius: 3px; .fileBtn{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; outline: none; background: transparent; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } }
js部分:
updateActivity(status){ //判断文件大小 文件不能超过10MB let file = document.getElementById("commodityFile").files[0]?document.getElementById("commodityFile").files[0]:‘‘; if(file){ const isLt10M = file.size / 1024 / 1024 < 10; if (!isLt10M) { this.$message.error(‘上传文件大小不能超过 10MB!‘); return false; } } let styleNos = []; if(this.tableData.length > 0){ this.tableData.forEach(item => { styleNos.push(item.styleNo); }) } var form = new FormData(); form.append(‘activityName‘,this.formInline.activityName); form.append(‘status‘,status); form.append(‘startTime‘,this.formInline.startTime); form.append(‘endTime‘,this.formInline.endTime); form.append(‘tagId‘,this.formInline.tagId); form.append(‘id‘,this.formInline.id); form.append(‘styleNos‘,styleNos); form.append("commodityFile", file); this.axios.defaults.headers.post[‘Content-Type‘]=‘multipart/form-data;charse=UTF-8‘; this.axios({ method: ‘post‘, data: form, transformRequest: [function(){ return form; }], url: ‘/activity/updateActivity‘, }) .then(res => { res = res.data; if(res.state == ‘success‘){ this.$message.success(res.data); }else{ this.$message.error(res.data); } }); },
参考文章: https://blog.csdn.net/weixin_34413802/article/details/88722992