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

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

multipartform-data axios

Santhosh · 技术社区 · 3 年前

我必须使用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 回复 | 直到 3 年前

Jishnu P Das 2 年前

当您通过多部分/表单数据发送这样的数组时 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

推荐文章

Hadi Zouhbi · 如何将从axios获得的数据传递到使用node的后端。js(react&node.js)

2 年前

Fatt Sky · 返回axios get错误([[PromiseState]]:“拒绝”)

2 年前

Vodka · 如何将单个json对象转换为json数组?

2 年前

Selcukusu · 为什么在show-axios-react之后无法清除错误消息

2 年前

Carlos Henrique R. Pereira · 我的API请求有效,但无法访问内容

2 年前

torrey pines · React在错误的API调用中不输出axios catch错误,而是获取JavaScript错误

2 年前

C9Tolan · React和Axios Post有效负载格式

2 年前

bami · 动态SSG页需要getStaticPaths,而地址缺少getStaticPaths

2 年前

kunosyn · 未使用“回调地狱”语法定义Javascript类属性

2 年前

sergioac · 如何在react js中使用带有自定义钩子的表单数据?

2 年前