Question

我在前端使用react / redux设置了一个django项目，我需要能够从前端上传多个在后端读取的文件（不保存到数据库或任何东西），以便我可以做一些服务器端处理。但是，我似乎无法在django请求处理程序中获取文件。我敢肯定，我的标题或发布方法很愚蠢，但我已经阅读了30篇类似标题的SO问题，而我似乎无法使我的工作正常。

我有一个FileUploader组件，该组件似乎允许我上传文件并以我的状态存储它们。点击上传按钮后，我将其强制为formData（就像大多数Django消息人士所说的那样）并触发我的发布请求。

我的React组件

export class FileUploader extends Component {
  static propTypes = {
    files: PropTypes.object.isRequired
  };

  fileSelectedHandler = event => {
    this.props.uploadFiles(event.target.files);
  };

  fileUploadHandler = event => {
    let formData = new FormData();
    formData.append("files", this.props.files);
    console.log(this.props.files);
    console.log("formData", formData);
    this.props.addSubmission(formData);
  };

  render() {
    return (
      <div className="file-uploader">
        <input type="file" multiple onChange={this.fileSelectedHandler} />
        <button onClick={this.fileUploadHandler}>Upload</button>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  files: state.submissions.files
});

export default connect(
  mapStateToProps,
  { uploadFiles, addSubmission }
)(FileUploader);

我在redux操作中的发帖请求：

export const addSubmission = submission => dispatch => {
  axios
    .post("/api/submission_stats/add_submission/", submission)
    .then(res => {
      dispatch({
        type: ADD_SUBMISSION,
        payload: res.data
      });
    })
    .catch(err => console.log(err));
};

我的Django视图集：

class SubmissionStatsViewSet(viewsets.ModelViewSet):
    queryset = SubmissionStats.objects.all()
    permission_classes = [
        permissions.AllowAny
    ]
    serializer_class = SubmissionStatsSerializer

    @action(detail=False, methods=['post'])
    def add_submission(self, request, pk=None):
        #at this point, request.FILES is always empty

我希望发生的事是能够在我的Django请求处理程序中的request.FILES属性下访问这些文件。但是，即使我的标题似乎发送了formData，它也总是空的。我已经尝试了建议的其他方法，例如在我的axios帖子中添加enctype =“ multipart / form-data”标头或某些content-type标头。我也尝试使用普通形式并放弃了react / redux的内容，但是我无法使其正常工作。我认为这很简单，因为我不明白为什么上传文件不应该是一件简单的事情，但是我有点不了解，似乎无法弄清楚。

使用axios从React / Redux前端将文件上传到Django时出现问题

0 个答案: