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

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

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

上一篇:PHP的垃圾回收机制-PHP高级面试题+详解


下一篇:Android studio DELETE_FAILED_INTERNAL_ERROR Error while Installing APKs