前端通过axios和FormData实现文件上传功能遇到的坑

使用element-ui中的upload上传组件，前端上传数据参数已经传过去了，但是后端 (java) 接不到数据 (null)

【解决方案】

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:;

                left:;

                width: 100%;

                height: 100%;

                outline: none;

                background: transparent;

                filter: alpha(opacity=0);

                -moz-opacity:;

                -khtml-opacity:;

                opacity:;

            }

        }

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

巴特西

前端通过axios和FormData实现文件上传功能遇到的坑

最新文章

热门文章