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

Posted 2023-02-22

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

【英文标题】：Django Rest Framework - The submitted data was not a file. Check the encoding type on the form

【发布时间】：2019-04-30 05:25:54

【问题描述】：

我有一篇使用文本字段的 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"  

当我控制台记录它时。

我已在 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 请求中，但随后它说没有上传任何文件并且所有其他字段都是空白的。谢谢！

【问题讨论】：

你试过用FormData代替JSON吗？ const formData = new FormData(); formData.append('image', image); ... ; axios.post('http://localhost:8000/api/v1/reports/', formData);

我可以只为图像执行此操作，还是应该将所有字段附加到 formData？

您当前在 JSON 中拥有的所有字段都应该放在 formData 中，所以您会得到 axios.post(url, formData, headers );

【参考方案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` 
);

【讨论】：

我为此苦苦挣扎了将近一个小时。修复是正确的。我注意到的一件事是，在 formData 中生成数据后，不要在代码中添加 ", headers: "content-type": "multipart/form-data" " 。它不会工作！谢谢