Django Rest Framework-提交的数据不是文件。检查表单上的编码类型

Question

我有一个关于文本字段的React Axios帖子，但是现在我想在模型中添加图像字段。

这是我在图像字段中的新模型：

def get_image_path(instance, filename):
    return os.path.join('posts', str(instance.author), filename)


class TripReport(models.Model):
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    countries = models.ManyToManyField(Country, blank=False, related_name='trip_countries')
    title = models.CharField(max_length=100)
    content = models.TextField()
    image = models.ImageField(upload_to=get_image_path, null=True, blank=False)
    date_posted = models.DateTimeField(default=timezone.now)
    slug = models.SlugField(max_length=12, unique=True, blank=True)
    favoriters = models.ManyToManyField(User, related_name='favoriters')

我用这个从我的表单中拉出文件：

e.target.image.files[0]

它将记录如下文件对象：

{ name: "DSCF6638.JPG", lastModified: 1340012616000, webkitRelativePath: "", size: 5395895, type: "image/jpeg" } 

当我进行控制台登录时。

我已经将image变量添加到axios的POST请求中：

export const postTripReport = (author, title, content, countries, image) => {
  const token = localStorage.getItem('token');
  return dispatch => {
    dispatch(postTripReportsPending());
    axios.post(
      'http://localhost:8000/api/v1/reports/',
      {
        title: title,
        content: content,
        author: author,
        countries: countries,
        image: image
      },
      {headers: { 'Authorization': `Token ${token}`}}
    )
      .then(response => {
        dispatch(postTripReportsFulfilled(response.data));
      })
      .catch(err => {
        dispatch(postTripReportsRejected());
        dispatch({type: "ADD_ERROR", error: err});
      })
  }
}

我是新手，所以不确定当前如何编码表单。这只是一个简单的输入：

   <input
      name='image'
      accept="image/*"
      id="flat-button-file"
      multiple={false}
      type="file"
    />

我尝试将multipart / forms-data标头添加到axios请求中，但是随后它说没有文件上传，其他所有字段均为空白。谢谢！

Answer 1

您可以将数据放在一个FormData对象中，而不是使用常规对象。这样，axios将发送数据multipart/form-data而不是JSON。

const formData = FormData();

formData.append("title", title);
formData.append("content", content);
formData.append("author", author);
formData.append("countries", countries);
formData.append("image", image);

axios.post("http://localhost:8000/api/v1/reports/", formData, {
  headers: { Authorization: `Token ${token}` }
});