微信小程序-----合法域名问题

本文介绍了解决小程序接口请求中遇到的合法域名验证问题的方法,包括关闭验证和将域名添加到后台配置两种方案。

开发过程请求接口中如出现该问题,有两种解决方案:

1、关闭合法域名验证-----打开详情,选中

2、管理员将其需要使用的域名添加入小程序后台,待保存提交后过段时间(10分钟左右),合法域名生效




<think>我们正在实现微信小程序的图片上传功能。需要提供前端(微信小程序)代码和后端(Django)代码。前端部分:使用微信小程序的API(wx.chooseImage选择图片,wx.uploadFile上传文件)后端部分:Django接收上传的图片文件,并保存到指定位置,然后返回存储的信息(如URL)。根据引用[2]我们知道,在请求后端接口时,需要在header中加入token进行身份验证。因此,前端上传图片时也需要在请求头中携带token。步骤:1.前端:用户选择图片(可以调用wx.chooseImage)2.前端:使用wx.uploadFile将图片上传到Django后端指定的接口。3.后端:Django视图函数接收图片,验证用户身份(通过JWT token),保存图片,并返回图片的访问URL。注意:微信小程序上传文件时,header中的token不能直接放在header里,因为wx.uploadFile的header参数是专门用于设置请求头的。参考引用[4]中,我们使用了WeChatPay,但这里我们不需要支付,而是处理图片上传。我们开始编写代码:前端(微信小程序)示例代码:在wxml中放置一个按钮,触发选择图片和上传。在js文件中,编写事件处理函数。后端(Django)视图函数:使用Django的FileStorage来处理上传的文件。同时,我们需要考虑:-文件存储位置:使用Django的MEDIA_ROOT设置。-返回的图片URL:使用MEDIA_URL拼接。另外,由于微信小程序要求HTTPS,且后端接口需要配置在小程序合法域名中。下面分别给出代码示例。</think>### 微信小程序图片上传功能实现 #### 一、前端代码(微信小程序) ```javascript // pages/upload/upload.js Page({ data: { imageUrl: '' }, // 选择图片 chooseImage() { const that = this wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success(res) { const tempFilePaths = res.tempFilePaths[0] that.uploadImage(tempFilePaths) } }) }, // 上传图片到Django后端 uploadImage(filePath) { const token = wx.getStorageSync('token') // 从缓存获取JWT token wx.showLoading({ title: '上传中...' }) wx.uploadFile({ url: 'https://your-domain.com/api/upload/', // 替换为实际API地址 filePath, name: 'image', // 与后端字段名一致 header: { 'Authorization': 'Bearer ' + token // JWT验证头 }, formData: { 'user_id': wx.getStorageSync('user_id') // 附加用户ID }, success(res) { const data = JSON.parse(res.data) if (res.statusCode === 201) { that.setData({ imageUrl: data.url }) wx.showToast({ title: '上传成功' }) } else { wx.showToast({ title: data.message, icon: 'none' }) } }, fail() { wx.showToast({ title: '网络错误', icon: 'none' }) }, complete() { wx.hideLoading() } }) } }) ``` ```xml <!-- pages/upload/upload.wxml --> <view class="container"> <button bindtap="chooseImage">选择图片</button> <image src="{{imageUrl}}" mode="aspectFit" wx:if="{{imageUrl}}"/> </view> ``` #### 二、后端代码(Django) ```python # settings.py 添加配置 MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # urls.py from django.urls import path from .views import ImageUploadView urlpatterns = [ path('api/upload/', ImageUploadView.as_view()), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) ``` ```python # views.py from rest_framework.views import APIView from rest_framework.parsers import MultiPartParser from rest_framework.response import Response from rest_framework import status from rest_framework.permissions import IsAuthenticated from django.core.files.storage import FileSystemStorage import uuid class ImageUploadView(APIView): parser_classes = [MultiPartParser] permission_classes = [IsAuthenticated] # JWT验证 def post(self, request): # 获取上传的图片文件 image_file = request.FILES.get('image') if not image_file: return Response({'message': '未检测到图片文件'}, status=status.HTTP_400_BAD_REQUEST) # 生成唯一文件名 ext = image_file.name.split('.')[-1] filename = f"{uuid.uuid4()}.{ext}" # 保存文件 fs = FileSystemStorage() saved_path = fs.save(filename, image_file) # 返回访问URL image_url = request.build_absolute_uri(fs.url(saved_path)) return Response({ 'url': image_url, 'message': '上传成功' }, status=status.HTTP_201_CREATED) ``` #### 三、关键实现要点 1. **身份验证**:前端在header携带JWT token,后端使用`IsAuthenticated`权限类验证[^2] 2. **文件处理**: - 前端使用`wx.uploadFile`API上传 - 后端通过`request.FILES`获取文件流 - 使用UUID生成唯一文件名避免冲突 3. **安全措施**: - 限制上传文件类型(可在后端添加扩展名验证) - 设置文件大小限制(Django配置`DATA_UPLOAD_MAX_MEMORY_SIZE`) 4. **跨域问题**:需配置Django CORS中间件(安装`django-cors-headers`) #### 四、测试流程 1. 小程序端选择图片 → 携带JWT token发起请求 2. Django接收文件 → 验证用户权限 → 存储到media目录 3. 返回图片访问URL → 小程序展示图片 > 实际部署时需配置HTTPS证书,微信小程序要求所有请求必须为HTTPS协议[^3]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值