前端一次性在接口中给后端传多个文件流的集合作为参数

最新推荐文章于 2025-06-14 22:42:11 发布

原创最新推荐文章于 2025-06-14 22:42:11 发布 · 622 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #上传文件 #文件流

前端上传文件后，文件流暂存在数组中。保存时，接口传参多个文件流

一、前端暂存文件流

        // 上传附件，attachFiles前端暂存文件流为一个数组
        httpSuggestionRequest: function (param) {
            console.log(param, 'param')
            if (this.attachFiles.length === 10) {
                this.$message.error('上限10个文件！');
                return;
            }
            let obj = {
                name: param.file.name,
                file: param.file // 文件流数据
            };
            this.attachFiles.push(obj);
            console.log(vm.attachFiles, 'attachFiles')
        },

二、在接口调用时，将文件流转为formData格式

 // 发送消息
        sendMessage() {
                    vm.loading = true;
                    // 整理附件参数
                    var formData = new FormData();
                    // 循环遍历多个文件流，append到formData中
                    this.attachFiles.forEach((item, index) => {
                    formData.append(`attFiles[${index}]`, item.file); // `attFiles`是后端接收的字段名，可根据需求调整
                    });
                    formData.append("subject", vm.ruleForm.subject);
                    formData.append("orderNumbers", vm.ruleForm.orderNumbers);
                    formData.append("body", vm.ruleForm.body);
                    request({
                        url: 接口地址,
                        method: 'post',
                        data: formData
                    })
                        .then(function (res) {

                        }).catch(function () {
                           
                        });
                }

        },