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

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

一、前端暂存文件流

        // 上传附件,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 () {
                           
                        });
                }

        },

你可能感兴趣的:(前端,javascript,上传文件,文件流)