WebKitFormBoundary 使用 axios FormData 将文件上传到 S3

Question

我正在尝试将文件上传到 S3，文件已成功上传，但下载时它包含 WebKitFormBoundary

------WebKitFormBoundaryrTBzWaHQntWAtZLX
Content-Disposition: form-data; name="file"

hello world
------WebKitFormBoundaryrTBzWaHQntWAtZLX--

使用 axios 上传

const formData = new FormData();
formData.append('file', this.file);

this.axios.put(this.formUrl,
                formData,
                {
                    headers: {
                        // 'Content-Type': `multipart/form-data`,
                        'Content-Type' : 'application/octet-stream',
                    },
                })
                .then((res) => {

console.log(res) }).catch((e) => { console.error(e) });

如何去除边界

Answer 1

我遇到了同样的问题。但解决方法很简单。这是我用来上传文件的代码

axios({
    method: "PUT",
    url: url,
    data: fileToUpload,  // NOTE - this is the file not the FormData Object
    headers: { 
        "Content-Type": "multipart/form-data" }
    })
    .then(res => {
        this.setState({
            uploadSuccess: "File upload successfull",
                error: undefined
            });
     })
    .catch(err => {
       console.log(err) 
    });

真正发生的情况是，当您将文件附加到 FormData 时， FormData 会被序列化，并且该序列化的数据存储在 S3 中。这就是文件损坏的原因。

在解决方案中，我们不将文件包装在 FormData 对象中。我们所做的是直接将文件添加到数据属性中。因此，除了文件本身之外，没有其他任何东西会被序列化并存储在 S3 中。

希望这个答案会有所帮助