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

最新推荐文章于 2025-02-02 11:50:57 发布

weixin_34418883

最新推荐文章于 2025-02-02 11:50:57 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端后端 javascript ViewUI

原文链接：http://www.cnblogs.com/rachelch/p/11063572.html

博客讲述使用element-ui的upload上传组件时，前端已传数据参数，但后端Java接收到的数据为null的问题，还给出了html、css、js部分的解决方案，并提供了参考文章链接。

使用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: 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);
                }
            });
        },