您如何使用 axios react 发布文件以及其他一些数据？答案

【问题标题】：How do you post a file along with some other data using axios react?您如何使用 axios react 发布文件以及其他一些数据？
【发布时间】：2020-03-19 06:27:06
【问题描述】：

所以我的模型看起来像这样。

# posts/models.py 
from django.db import models 

class Post(models.Model):

    title = models.TextField() 

    cover = models.ImageField(upload_to='images/') 

    def __str__(self): 

        return self.title

我知道你可以像这样使用 axios 上传文件

 fileUpload(file){ 
const url ='http://example.com/file-upload'; 

const formData = new FormData(); 

formData.append('file',file) 

const config = { headers: { 'content-type': 'multipart/form-data' } } 

return post(url, formData,config)

 }

但我想上传图片和标题。我如何在 axios 中做到这一点？

【问题讨论】：

我认为这篇 SO 帖子会有所帮助：stackoverflow.com/a/50774380/8448463
不要初始化并清空FormData()，而是使用包含您需要的输入字段的表单对其进行初始化：form = $('#my-form'); const formData = FormData(form)。
但我正在使用 react 如何在 react 中执行 form = $('#my_form')

标签： django reactjs django-rest-framework axios

【解决方案1】：

var formData = new FormData();
var archive = document.querySelector('#file');
formData.append("file_location", archive.files[0]);
formData.append("title", archive.files[0].name);
axios.post('http://localhost:8000/files/data/', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})

【讨论】：