代码之家 › 专栏 › 技术社区 › Santhosh

axios+DRF(django):multipart/form:如何传递数组

multipartform-data axios

Santhosh · 技术社区 · 5 年前

我必须使用axios在Formdata中传递一个数组,因为我还有一个图像。

data = {
    "photo": {
        "0": ...
    },
    "services": [
        2,
        3,
        1
    ],
    "name": "tet",
    "location": "123",
    "phone": "232323"
}

这是我的斧头

const url = "api/store/";
const auth = {
headers: {
  "Content-Type": false,
},
};
const formData = new FormData();
for (const key in data) {
if (key === "photo") {
  if (data[key][0] !== undefined) {
    formData.append(key, data[key][0]);
  }
} else {
  formData.append(key, data[key]);
}
}
const promise = axiosInstance.post(url, formData, auth);
return promise;

现在如何发送 services 作为中的数组 formData

0 回复 | 直到 5 年前

Jishnu P Das 4 年前

当您通过多部分/表单数据发送这样的数组时 request.data QueryDict python在内部使用的是将所有发布的数据表示为字符串,这导致了失败。

在您的情况下,您使用axios发送的数据会像这样进入python

QueryDict({
    "photo": ["file"],
    "services": ['2,3,1'],
    "name": ["tet"],
    "location": ["123"],
    "phone": ["232323"],
})

我们需要修改它,使它看起来像这样


QueryDict({
    "photo": ["file"],
    "services": [2, 3, 1],
    "name": ["tet"],
    "location": ["123"],
    "phone": ["232323"],
})

您可以覆盖序列化程序或视图集创建方法来实现此

def create(self, request, *args, **kwargs):
    # override create method when posting as multipart/form-data
    # services are sent as a string from the frontend
    # so we need to convert it to a list
    services = request.data.get("services", None)
    if services and isinstance(services, str):
        request.data._mutable = True  # make QueryDict mutable to perform updates
        parsed_services = services.split(",")  # services are of form ["1,5,9"] now
        services = [int(s) for s in parsed_services]
        request.data.setlist("services", services)  # set as a list in the request
        request.data._mutable = False  # make the QueryDict immutable again

    return super().create(request, *args, **kwargs)

裁判:

https://docs.djangoproject.com/en/dev/ref/request-response/?from=olddocs#django.http.QueryDict

推荐文章

mustafa · 如何使用vapor客户端发送多部分表单数据请求

2 年前

Jithesh Kumar · 如何在flutter中将图像和其他数据一起发送到服务器formdata

2 年前

trogwar · Guzzle中的Mimic curl工作脚本(多部分数据和二进制上传一起)

2 年前

Dave · 如何创建一个NestJS端点,该端点除了一个字符串字段外,还接受两个文件?

2 年前

Y.O.AK · Multipart:使用nestjs意外结束表单

3 年前

Lord Vordemolt · Rust-reqwest::multipart::Form不工作

3 年前

Awais Fayyaz · 在swift中使用多部分/表单数据上传带参数的图像

8 年前

mahan · 将文件从AngularJS控制器上载到Kotlin中的Spring writtin

8 年前

twocents · 在多部分/表单数据POST请求节点| Express |请求中发送缓冲区

8 年前

LEJ · 使用Axios将文件发送到Spring Boot REST

8 年前