我有问题从我的react js上传头像到我的django服务器使用rest api，我使用cloudinary来存储我上传的所有图片 - 腾讯云开发者社区

文章/答案/技术大牛

发布

使用 React 和 Django REST Framework 构建你的网站

在我们最近的工作中，构建网站使用的架构是带有 Django REST Framework（DRF）后端的 React 前端。它们是通过在前端使用 axios（前端库）调用后端 API 来交互的。...我们还使用了 Redux（前端库）来存储全局的应用程序状态（存在浏览器端）。这是我们首选，因为它允许前后端完全分离。...这也使我们可以轻松的为未来的任何项目创建移动端 App，因为它们仍然可以复用后端 API。在本文的剩余部分，我将介绍如何配置 React 前端和 DRF 后端。...注意我假设你已经熟悉了 React，Redux，Django，DRF，NPM 等，本篇不是基础教程哦。...一旦完成，我们就可以使用我们存储的 token 令牌来创建一个基于 axios 的 API 客户端（译者注：这样就不需要每次都显式的将令牌信息从 store 中拿出来再插入 payload 中了），这样从我们的

7.8K7 0

django 自带 user 字段扩展及头像上传

目前扩展 user 字段我找到的有 4 种方式。 1....Android 端，所以直接使用系统的 TokenAuthentication，parser_classes 和 renderer_classes 基本每个 view 都类似，但是涉及到图片上传，一定要添加...首先需要通过 is_valid() 判断上传的数据是否有效，有效则通过 pillow 的 Image 模块的 open 打开上传图片，否则返回 HTTP_400_BAD_REQUEST 打开上传的图片后会产生一个副本...至于如何设计每个人都不同，我的思路是每个用户的头像都保存到各自以用户名为名的文件夹下，为了防止前一张头像被覆盖，所以用时间戳作为图像名，然后加上客户端回传的后缀名就可以生成我们的图片文件了。...如果是在本地测试，数据库显示的文件地址会是你本地项目的地址，但是当你从客户端发出请求后，收到的会是服务器地址，没毛病，不要以为自己保存的路径错了。

2.6K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

FastAPI框架诞生的缘由（上）

首先，我尝试使用许多不同的框架，插件和工具来解决 FastAPI 涵盖的所有功能。...创建它是为了在后端生成 HTML，而不是创建现代前端（例如 React，Vue.js 和Angular）或与其通信的其他系统（例如 IoT 设备）使用的API 。...然后我发现 API 文档有一个标准叫 Swagger ，它使用 JSON 或 YAML 来描述。并且 Swagger API 的 Web 用户界面已经被人创建出来了。...Flask REST frameworks 有几个 Flask REST frameworks ，但经过调查和试用，我发现，不少项目都停产或放弃，还存在有一些长期的问题，使得它们并不适合解决前面的问题...如果没有数据验证，你就必须用手工写代码来完成所有的检查。这两点功能就是 Marshmallow 所提供的，这些是一个伟大的图书馆，之前我经常使用它。

2.7K1 0

博客图床迁移记

回顾之前用了好多免(hao)费(yang)图(mao)床，从最早的七牛，到 Cloudinary，再到微博图床。...完成以上工作，就可以利用 Chevernote 程序来搭建图床了。 Chevernote 的安装过程还是比较简单的，基本上按照步骤就好了，中间可能要设置一些权限问题和 Nginx 配置。...Chevernote 有个 API 接口，正好可以通过图片链接，将图片上传到图床上，通过这个接口就能搞定迁移了，前提的要拿到自己的 api key 。...再使用 requests 库做网络请求，向 Chevernote 的 API 发送 GET 请求，解析返回的 JSON 数据，得到上传图床后的链接。...因为图片是存储在 VPS 具体目录下的，可以把图片所在目录当做工程，然后上传到 Github ，万一哪天 VPS 挂了，就把文章中的链接替换成 Github 上的链接就好了。

1.4K3 0

React + Node.js 全栈实战教程 - 手把手教你搭建「文件上传」管理后台

前端我们使用 Reactjs + Axios 来搭建前端上传文件应用，后端我们使用 Node.js + Express + Multer + Mongodb 来搭建后端上传文件处理应用。...当然，本教程还会教给大家如何写一个可以限制上传文件大小、有百分比进度条、可报错、可显示服务器上文件列表、可点击下载文件的前端操作界面。...）使用 Node.js + MongoDB 开发 RESTful API 接口（Node.js + Express + MongoDB）如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云...的 Promise 状态所以 uploadPromises 中存储的就是处于 Promise 状态的上传文件函数，接着我们使用 Promise.all 同时发送多个文件上传请求，在所有文件都上传成功后...这是因为后端部分还没有跑起来，接下来，我带领大家手把手搭建上传文件的后端部分。 React 前端「文件上传」源码你可以在我们的 github 上下载到完整的 React 图片上传 Demo。

16.5K1 0

2022 年10个优质的 Node.js CMS 平台分享

「Strapi」提供了「REST」和「GraphQL API」，开发人员可以使用这些「API」来访问存储在其存储库中的内容。...「Ghost」提供了一个「REST API」，开发人员可以使用它来检索「CMS」数据并将其显示给目标受众。它首先是一个开源软件，因此我们可以免费克隆存储库并将实例部署到我们的服务器上。...「Prismic」提供了「REST」和「GraphQL API」，开发人员可以使用这些「API」来访问存储在其存储库中的内容。...「Tina」提供了一个「GraphQL API」，我们可以使用它来查询和获取我们的内容。还有一个「Cloudinary」包，我们可以用它来优化和管理我们的媒体文件。...「Payload」提供基于配置文件中定义的内容集合自动生成的「REST」和「GraphQL API」。我们还可以将本地「API」与服务器端框架（例如「Next.js」）一起使用。

4.9K2 0

出门戴口罩，帮头像 P 上 N95 吧｜云开发实战

本来呢，我的方案是小程序配合放在腾讯云个人服务器搭建的 nodejs + express实现的 API 服务。...那怎样才能创新呢，我在使用“我要戴口罩”小程序过程中发现，口罩的位置是手动移动的，我就想如何自动戴过去呢，正好先前看到的“自动识别戴圣诞帽”，那我来一个戴口罩就好了。...在“自动佩戴圣诞帽”中，使用的方案是纯前端的 face-api，想放到小程序中就会有如下几个小问题： face-api 的识别模型有 5M 大小还多，即使纯前端加载，也显得比较大。...当然，使用过程中非常大的坑就是，我的实现过程是需要上传 1M 以上大小的图片，而“五官分析”签名方法需要TC3-HMAC-SHA256，官方提供 npm 版本tencentcloud-sdk-nodejs...裁剪图片在“我要戴口罩”小程序中的另一个痛点就是如果上传一个长方形图片，会被强行变成正方形。

1.1K1 0

图片识别加速，从10秒变为1秒，是怎么做到的呢？ | 云开发实战

本文讲解的是我的快快戴口罩小程序中核心逻辑，如何给人脸戴上口罩，也就是使用腾讯云的人脸识别中的五官分析来实现的。...2 个小问题问题 1：第一个要处理的问题，是从小程序侧直接上传还是传给个人服务器或云端后再转发呢？...在启动了基于 nodejs 的 express.js 写的简单的 Rest API 服务后，借助于 nginx 将来自二级域名的请求转发到 node 站点上先说花销上，域名每年需要几十元、服务器也需要几十元或几百元不等...PS：我这个小程序的图片识别只是暂时的请求数据，并未需要将图片上传到云存储，让用户下次还能看到这个图片。那么效果如何呢？总使用时间大约为 3 秒以内，其中请求时间约为 0.8-1.2 秒。...，就报错利用 fileID 删除云存储上的图片使用 fileID 从云开发的存储里下载文件 Promise.allSettled 异步全返回图片审核-使用 Buffer 五官分析-使用 base64

4021 0

【腾讯云 Cloud Studio 实战训练营】构建基于 React 的实时聊天应用

这里我使用的是微信扫码授权登录，登录成功即注册成功；图片登录成功进入 Cloud Studio 主页面如下。图片2....如果是正式部署服务器，那么这部分内容应当自动将图片上传到图片服务器，然后返回图片地址。...handleOnEarlier(){ // 处理加载更多 }▶ onImage 上传图片回调函数一般是将图片上传到服务器，返回图片 url，然后再将消息加到聊天框里面。...本模板已发布到腾讯云 Cloud Studio 上作为公共模板使用，可直接创建应用，对接你自己的 API，代码中有详细注释。...开发者应该都深有体会，其实写代码本身也没多大难度，但开发环境的搭建很多时候可能都不会那么的顺利，不是这里环境有问题，就是那里版本不对，或者一点点的小 bug，整个过程很让人抓狂。

4793 1

独立开发一个社交 APP 的架构分享 (已实现)

由于内容十分地多，我尽我自己的能力将各个功能模块的做法尽可能地去讲清楚，欢迎留言，有问必复，文章会不断更新，下面所有谈及的功能皆已实现。...接口一、功能架构公共部分所有用户头像显示圆形，点击即跳转到详情页面详情页面可以看到该用户的所有帖子操作记录，头像和背景图片帖子、文章图片点击是看大图的效果，支持双指缩放，多图侧滑切换，无限循环...就不仅仅是显示个图片那么简单了，还有网络请求，上传等，网络请求和上传的代码这部分因为我自己能够写出还不错的几个函数，所以为了减少不必要的消耗，没使用volley。...新浪微博登陆使用新浪开放平台的 SDK，新浪SDK会自动判断用户是否有安装新浪APP 2) 发表帖子功能的实现编辑文字部分字数的限制一定要限制用户帖子的输入字数的限制，一来减少服务器负担...，在服务器的配置还可以的情况下，可以采用冗余来解决查找慢的问题。

5.2K10 1

css-in-js 探讨

可能会想到内联样式来解决此问题，但它们不支持伪类，属性选择器，媒体查询等。可重用性重用规则集，媒体查询等是我最近很少看到的一个主题，因为它已经被Sass和Less等预处理器解决了。...例如，人们正在使用VS Code扩展样式组件来表示类似情感的CSS-in-JS库，即使它们并非都具有相同的功能。我甚至看到提议功能的API选择受到保留语法突出显示的目标的影响！...未来有两个新的CSS-in-JS库，Linaria和astroturf，它们通过将CSS提取到文件中来管理零运行时。它们的API类似于样式组件，但它们的功能和目标各不相同。...Linaria的目标是通过内置函数（如作用域，嵌套和供应商前缀）来模仿CSS-in-JS库的API，如样式组件。...最值得注意的是，通过使用CSS-in-JS，我们基本上从CSS生态系统中退出并使用JavaScript来解决我们的问题。

6.2K2 0

我的web开发小结

在开发环境中，前端使用 vue，后端使用 DRF(django rest framework)，前端端口 8080，后端端口 8000，在接口调试中我们需要将 8080/api/ 的请求转发到 8000.../api/ 上，使用 vue 配置文件中设置代理服务器就可以轻松转发，访问 django 的静态资源也转发一下，配置信息大致是这样的： devServer: { compress...，这并没毛病，但当你把 django 配置文件中的 DEBUG 设置为 FALSE 后，原来有 django 来驱动的静态不再由 django 来驱动了，需要 nginx 来接管。...遇到此问题的朋友，可以参考我的做法：第一、先把所有的 static 文件，主要是 css 文件，js 文件，字体文件等收集到一起，vue 的静态文件就在 dist 目录，而 django 的静态文件需要执行以下命令先收集静态文件...第二、通过 django 上传 media 文件也由 nginx 来驱动。

1.2K2 0

我让GPT4为OriginBot开发了一个监控功能

这段对话中，我给ChatGPT赋予了一个机器人开发专家这样一个角色来激活领域知识，从我的使用经验来看，这么做对于提升GPT回答的有效性有一定的提升。...设置Django + DRF服务器在服务器上，建立一个Django项目，并且利用Django REST framework(DRF)构建API接口。...设置Django + DRF服务器在服务器上，建立一个Django项目，并且利用Django REST framework(DRF)构建API接口。...下一步将会设计如何利用Django和Django REST framework构建API来进一步处理和分发这些图像数据。...请你阅读以上对话 Message From ChatGPT: 好的，这是我们之前对话内容的总结：你有一个项目用于从 MQTT 服务器订阅图片数据，并将它们存储到数据库中。

6751 0

【解决方案】ElementUI图片上传前如何对尺寸进行验证并且上传到新浪SCS?

要实现对图片宽高的验证,我这里是借助了javascript原生API FileReader 二.javascript原生API FileReader 先来学习一下这个api的使用方法,然后再结合elementUI...; } 三.ElementUI与FileReader的结合实现验证既然是获取图片的宽高,那么我这里也是借助了图片来进行验证,既然是图片,我们就要用到FileReader接口的readAsDataURL...验证通过以后自然就是要上传了基于express图片上传到新浪云目标功能:图片上传操作流程:点击上传按钮->把图片上传到服务器->返回图片URL 1.组件中使用elementUI的上传 <el-upload.../dist/index.html'), 'utf-8'); res.send(html); }) 3.上传图片接口服务器端使用的是multer模块来处理上传的图片,使用post方式,并添加upload.single.../blog/uploadArticleImg")); 但是这个multer模块处理文件有个坑(更可能是我不懂配置),就是它会把上传的文件名更换成随机乱码,并且不会保留后缀,这就导致前端访问的时候直接下载了这个文件

1.4K2 0

如何用 24 小时，开发一款阴阳师小程序？

后端 API 开发我之前经常做 Django 的 API 服务开发，所以有比较完整的解决方案。...简而言之，through 特性可以使多对多关系的中间表增添一些额外的字段或属性，例如：需要存储每个副本里，有多少只不同的怪物，它们的数量又分别是多少。...在这里，我有一点感受：小程序本身组件化的设计思路，应该是借鉴了 React。小程序的语法风格，应该是借鉴了 Vue.js。...等批处理结束（期间可以刷个御魂啥的，刷完应该就好了），将得到的所有图片上传到静态资源服务器。图片到这里就处理完啦。 5....以上所有内容均已开源，欢迎大家到我的 GitHub 参考！

1.1K4 0

105-Django开发多商户询盘上级网站-在线聊天交流通讯

二、技术栈后端：Python、Django、Django REST framework（可选，用于API开发）数据库：Sqlite3（开发）、MySQL或PostgreSQL（生产）前端：HTML/CSS.../JavaScript（可能使用Vue.js、React等现代前端框架）通讯：WebSocket（实现即时通讯）缓存：Redis（可选，用于提高性能和缓存用户喜好）部署：Docker（可选，用于容器化部署...实现密码加密存储和验证。产品上传允许用户上传产品信息，包括图片、描述、价格等。实现产品分类和标签系统。提供产品审核机制（可选）。产品搜索过滤提供搜索功能，支持关键词搜索。...使用现代设计元素和风格，提升用户体验。四、数据库设计用户表：存储用户基本信息，如用户名、密码（加密后）、邮箱、手机号等。产品表：存储产品信息，如产品名称、描述、价格、图片链接、分类、标签等。...API文档（可选）：如果使用Django REST framework开发API，则输出API文档。测试报告：记录测试结果和发现的问题。部署指南：提供系统部署和配置的指导。

2501 0

Django Form的使用

是有特殊规律的，我们可以通过这些 id 进行一些 js 操作问题总结在这次项目需求中，我主要遇到的问题是，有几个表单页面，后台使用同一张表去做存储，但是每个页面有许多变化的元素，如果为了存储这些可变的值...所以我采用的解决办法是提取公共的元素，其他可变的元素用了一个json字段存在数据库中。而这样导致的问题就是，不能使用 ModelForm ，我选择了使用普通的 forms.Form 。...图片格式编辑页如何获取之前展示的结果对于图片，新建的时候上传还比较简单，问题是在于如果是编辑，如何带回原来的上传结果。我们都知道是没办法赋值的。...所以表单初始化的时候，也没有办法进行赋值。解决思路如下：在表单中新开一个字段，用来存储上传后的图片链接，当图片未上传时，整个 div 隐藏，当图片有值时，整个 div 展示。...后端通过判断真正的 file 字段与 url 字段，来判断是否有新上传文件。最终效果如下： ?

2.6K2 0

将网站静态资源全部上传到cdn

对象存储对象存储类似云盘，可以将一些小文件存储进去，并暴露出来外链，配合cdn之后访问非常快。我们的目标就是把网站的css、js、图片等其他一些资源上传进去，再通过cdn来加速访问。...图片图片 1.2 上传文件点进刚刚建好的存储桶，随便上传一个文件，我传了一个图片图片 1.3 查看域名存储桶列表，找到刚刚建好的存储桶，点配置管理，可以看到我们的访问域名图片图片访问域名...+文件路径就可以访问到我们上传到存储桶的资源可以直接访问测试一下图片 2. node自动上传我们可以在存储桶上传我们的js、css之类的文件、不过我们的文件那么多，一个一个上传明显不合理。...这时候，这些批量又重复的操作应该由我们的node出马，让我们来通过 node来批量上传我们的资源文件 2.1 获取密钥在密钥管理下可以新建一个密钥，一会要用图片 2.2 遍历目录既然要上传所有静态文件...修改项目的静态文件指向项目默认一般是指向根目录，我们把它改成我们的存储桶cdn链接（这里我使用了自定义域名，1.3那个访问域名也可以）以creat-react-app为例图片效果，使用了cdn链接后资源加载的非常快

8.6K6 1

在Jupyter Notebook中显示AI生成的图像

使用合适的工具，您可以将想法转化为创意，通过将文本转换为生成的图像并使用数字媒体管理工具Cloudinary将其存储在云中。 OpenAI的高智能图像API使得显示AI生成的图像成为可能。...（有趣的事实：DALL-E这个名字来源于艺术家萨尔瓦多·达利和电影《机器人瓦力》中伊娃的名字组合。）从内容创作到营销、广告和设计，使用生成的图像有很多商业和个人用例。...Cloudinary 配置 Cloudinary是一个基于云的工具，它提供图像和视频API，用于存储、转换、优化和交付所有媒体资产，并提供易于使用的API、小部件或用户界面。...来自OpenAI API的生成的输出图像 Cloudinary中上传的AI生成的图像项目的完整源代码，请使用这个gist或Google Colab中的这个notebook。结论已经有灵感了吗？...OpenAI API拥有许多内置功能，允许您扩展此项目。有很多用例，本教程展示了一种使用文字生成自定义个性化图像的方法。

3.4K1 0

Django项目最常用的20个包

DRF (Django REST Framework)[1] 有了 DRF，你可以快速将现有的 Django site 转换为 RESTful API。...django-debug-toolbar[2] 虽然Django自带了Debug模式，但 django-debug-toolbar 将其提升到一个新的水平，提供了一组可配置的面板来检查网站的所有区域，包括...如果你正在处理图像——用户个人资料图片、图像上传、缩略图等——那么你可能需要添加 Pillow，它与 Django 的 ImageField 一起工作。...虽然 Celery 是一个流行的选择，但我更喜欢django-q2，因为它更简单，与 Django 更紧密地集成，并使用 Django ORM 来调度任务和存储结果。...gunicorn[18] gunicorn 是最受欢迎的基于 WSGI 的 Python 服务器之一，它易于使用和上手，但有足够的配置选项来在必要时进行调整。

1.1K2 0

点击加载更多

使用 React 和 Django REST Framework 构建你的网站

django 自带 user 字段扩展及头像上传

FastAPI框架诞生的缘由（上）

博客图床迁移记

React + Node.js 全栈实战教程 - 手把手教你搭建「文件上传」管理后台

2022 年10个优质的 Node.js CMS 平台分享

出门戴口罩，帮头像 P 上 N95 吧｜云开发实战

图片识别加速，从10秒变为1秒，是怎么做到的呢？ | 云开发实战

【腾讯云 Cloud Studio 实战训练营】构建基于 React 的实时聊天应用

独立开发一个社交 APP 的架构分享 (已实现)

css-in-js 探讨

我的web开发小结

我让GPT4为OriginBot开发了一个监控功能

【解决方案】ElementUI图片上传前如何对尺寸进行验证并且上传到新浪SCS?

如何用 24 小时，开发一款阴阳师小程序？

105-Django开发多商户询盘上级网站-在线聊天交流通讯

Django Form的使用

将网站静态资源全部上传到cdn

在Jupyter Notebook中显示AI生成的图像

Django项目最常用的20个包

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐