如何修改Node.js脚本，通过axios配合Form-Data上传图片等文件

你之前手动拼接multipart/form-data请求体的方式，无法正确处理二进制文件的编码，导致上传后的文件损坏。使用form-data库可以自动处理边界、编码等问题，适配所有类型的文件上传。

前置操作 #

• 首先安装form-data依赖：

npm install form-data

完整修改后的代码 #

const FormData = require('form-data');

async function UploadAttachment(req, res) {
    let fileName = req.fileName;
    let Key = req.TokenKey;
    let fileContent = req.fileContent; // 注意此处必须传入Buffer类型，不要转成字符串
    // 初始化form-data实例
    const form = new FormData();
    
    // 对应你原来第一个form字段：payload的xml内容
    const payloadXml = `<attmnt>
  <repository id="1002"></repository>
  <orig_file_name>${fileName}</orig_file_name>
  <attmnt_name>${fileName}</attmnt_name>
  <description>Upload File</description>
</attmnt>`;
    form.append('payload', payloadXml, {
        contentType: 'application/xml; charset=UTF-8'
    });

    // 对应你原来第二个form字段：上传的文件内容
    form.append(fileName, fileContent, {
        filename: fileName,
        contentType: 'application/octet-stream',
        knownLength: fileContent.length // 传入Buffer长度避免解析异常
    });

    try {
        const axiosRes = await axios({
            method: 'POST',
            // 移除原URL中写死的mimeType=Text参数，否则非文本文件会被后端错误识别
            url: `http://server_name:8050/caisd-rest/attmnt?repositoryId=1002&serverName=server_name&description=${encodeURIComponent(fileName)}`,
            data: form,
            headers: {
                'Accept': 'application/xml',
                'Connection': 'Keep-Alive',
                'User-Agent': 'Apache-HttpClient/4.5.5 (Java/12.0.1)',
                'X-AccessKey': Key,
                // 自动生成带正确boundary的multipart请求头，不要手动写Content-Type
                ...form.getHeaders()
            }
        });
        return axiosRes.data;
    } catch (err) {
        logger.info("error in Upload " + err);
        throw new Error(err);
    }
}

关键说明 #

• 如果是从本地读取文件填充fileContent，直接使用fs.readFileSync(本地文件路径)返回的原始Buffer即可，不要做任何字符串转换操作
• 不要手动指定Content-Type: multipart/form-data，form.getHeaders()会自动生成带正确边界标识的请求头，否则后端无法正常解析请求内容

内容的提问来源于stack exchange，提问作者Nem