Question

我们有一个简单的后端Flask服务器API，使用flask_restplus将照片文件上传到S3，如下所示：

import werkzeug
from flask_restplus import reqparse

photoParser = reqparse.RequestParser()
photoParser.add_argument('photo',
                     type=werkzeug.datastructures.FileStorage,
                     location='files',
                     required=True,
                     help='photo')

…
@photoNamespace.route("/upload")
class UploadPhoto(Resource):
    @api.expect(photoParser)
    def post(self):
        args = photoParser.parse_args()
        photo = args['photo']
        filename = datetime.utcnow().strftime('%m%d%Y_%H%M%S_') + photo.filename

        try:
            s3.upload_fileobj(
                photo,
                S3_PHOTO_BUCKET,
                filename,
                ExtraArgs={
                    "ACL": "public-read",
                    "ContentType": photo.content_type
                }
            )

我们可以使用swagger界面和简单的HTML表单（输入名为“ photo”）将照片成功上传到S3存储桶。但是，我们当前的React上传在后端出现400错误，并且被flask服务器中的行args = photoParser.parse_args()停止了。 axios请求在底部的按钮中发出。

export interface MyFile extends File {
  path?: string /* etc */;
  preview?: string;
}

export const PhotoDropZone = (props: IPhotoDropZoneProps) => {
  const initialFiles: MyFile[] = [];
  const [files, setFiles] = useState(initialFiles);

  const { getRootProps, getInputProps } = useDropzone({
    accept: 'image/*',
    onDrop: acceptedFiles => {
      setFiles(prevFiles => {
    return prevFiles.concat(
      acceptedFiles.map(file => {
        const newFile: MyFile = Object.assign(file, {
          preview: URL.createObjectURL(file)
        });
        return newFile;
      })
    );
  });
}
  });

  const uploads = files.map((file: MyFile) => {
console.log(files);
    return (
      <SPhotoPreview key={file.path}>
        <SPhotoImgContainer>
          <SPhotoPreviewImg src={file.preview} />
        </SPhotoImgContainer>
      </SPhotoPreview>
    );
  });

  return (
    <SPhotoDropSection size='md'>
      <SPhotoDropContainer {...getRootProps({ className: 'dropzone' })}>
        <input {...getInputProps()} />
            <Icon
              icon='camera'
              height={32}
              width={32}
              fill={Styles.Colors.brand.blue}
            />
        <p>Upload photo</p>
      </SPhotoDropContainer>

  {files.length === 0 ? (
    <h1>Empty files</h1>
  ) : (
    <aside>
      <h4>Files</h4>
      <SPhotoPreviewList>{uploads}</SPhotoPreviewList>
    </aside>
  )}

  <Button
    onClick={async () => {
      const uploadPhotoURL = `${API_URI}/photo/upload`;
      console.log(uploadPhotoURL);
      console.log(files)

      const user = await axios({
        method: 'post',
        url: uploadPhotoURL,
        data: {
          photo: files[0]
        }
      });
    }}
  >
    Upload
  </Button>
</SPhotoDropSection>
  );
};

我怀疑请求中文件的格式有问题，但是我不知道发生了什么。

将文件上传到Flask Restplus 400错误

0 个答案: