如何使用 Axios 从表单发布文件

Question

使用原始 HTML，当我使用以下命令将文件发布到 Flask 服务器时，我可以从全局 Flask 请求访问文件：

<form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data>
    <input type="file" id="file" name="file">
    <input type=submit value=Upload>
</form>

在烧瓶中：

def post(self):
    if 'file' in request.files:
        # ....

当我尝试对 Axios 执行相同操作时，烧瓶请求全局为空：

<form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile">
    <input type="file" id="file" name="file">
</form>

<script>
function uploadFile(event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
    })
}
</script>

如果我使用上面相同的 uploadFile 函数，但从 axios.post 方法中删除 headers json，我会在 Flask 请求对象的表单键中得到一个 csv 字符串值列表（文件是 .csv）。

如何获取通过 axios 发送的文件对象？

Answer 1

将文件添加到

formData

对象，并将

Content-Type

标头设置为

multipart/form-data

。

var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

Answer 2

使用 Vue 的示例应用程序。需要在本地主机上运行的后端服务器来处理请求：

var app = new Vue({
  el: "#app",
  data: {
    file: ''
  },
  methods: {
    submitFile() {
      let formData = new FormData();
      formData.append('file', this.file);
      console.log('>> formData >> ', formData);

      // You should have a server side REST API 
      axios.post('http://localhost:8080/restapi/fileupload',
          formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
        ).then(function () {
          console.log('SUCCESS!!');
        })
        .catch(function () {
          console.log('FAILURE!!');
        });
    },
    handleFileUpload() {
      this.file = this.$refs.file.files[0];
      console.log('>>>> 1st element in files array >>>> ', this.file);
    }
  }
});

https://codepen.io/pmarimuthu/pen/MqqaOE

Answer 3

如果您不想使用

FormData

对象（例如，您的 API 采用特定的内容类型签名，而

multipart/formdata

不是其中之一），那么您可以这样做：

uploadFile: function (event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': file.type
        }
    })
}

Answer 4

分享我使用 React 和 HTML 输入的经验

定义输入字段

<input type="file" onChange={onChange} accept ="image/*"/>

定义 onChange 监听器

const onChange = (e) => {
  let url = "https://<server-url>/api/upload";
  let file = e.target.files[0];
  uploadFile(url, file);
};

const uploadFile = (url, file) => {
  let formData = new FormData();
  formData.append("file", file);
  axios.post(url, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((response) => {
      fnSuccess(response);
    }).catch((error) => {
      fnFail(error);
    });
};
const fnSuccess = (response) => {
  //Add success handling
};

const fnFail = (error) => {
  //Add failed handling
};

Answer 5

这对我有用，我希望对某人有帮助。

var frm = $('#frm');
let formData = new FormData(frm[0]);
axios.post('your-url', formData)
    .then(res => {
        console.log({res});
    }).catch(err => {
        console.error({err});
    });

Answer 6

这是我的方式：

var formData = new FormData(formElement);
// formData.append("image", imgFile.files[0]);
const res = await axios.post(
  "link-handle",
  formData,
  {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  }
);

Answer 7

如何使用内存中的对象（如 JSON 对象）发布文件：

import axios from 'axios';
import * as FormData  from 'form-data'

async function sendData(jsonData){
    // const payload = JSON.stringify({ hello: 'world'});
    const payload = JSON.stringify(jsonData);
    const bufferObject = Buffer.from(payload, 'utf-8');
    const file = new FormData();

    file.append('upload_file', bufferObject, "b.json");

    const response = await axios.post(
        lovelyURL,
        file,
        headers: file.getHeaders()
    ).toPromise();


    console.log(response?.data);
}

Answer 8

Axios 版本

0.25.0 >

到

0.27.2

存在问题，如果您有

FormData

多个字段，但对于包含文件的一个字段来说没问题，则无法正确处理

PUT

请求中的

appended

对象， POST 工作正常。

此外，Axios 0.25.0+ 会自动设置正确的标头，因此无需指定

Content-Type

。

Answer 9

如果你要拍照，你必须存储图像并保留其路径，然后从其路径中检索机器上的 blob，将 blob 添加到 formData 中，还添加图像的名称，然后使用multipart/form-data 标头，我们在 req.files 的后面找到图像

Answer 10

对我来说，错误是控制器中的实际参数名称......我花了一段时间才弄清楚，也许它会对某人有所帮助。我正在使用 Next.js / .Net 6

客户：

export const test = async (event: any) => {
    const token = useAuthStore.getState().token;
    console.log(event + 'the event')
    if (token) {
        const formData = new FormData();
        formData.append("img", event);
        const res = await axios.post(baseUrl + '/products/uploadproductimage', formData, {
            headers: {
                'Authorization': `bearer ${token}`
            }
        })
        return res
    }
    return null
}

服务器：

 [HttpPost("uploadproductimage")]
        public async Task<ActionResult> UploadProductImage([FromForm] IFormFile image)
        {
            return Ok();
        }

这里出错，因为服务器需要参数“image”而不是“img：”

formData.append("img", event);

 public async Task<ActionResult> UploadProductImage([FromForm] IFormFile image)