微信小程序拍照图片上传到mysql数据库

### 实现微信小程序拍照并上传图片至MySQL数据库 #### 配置Django项目与App设置 为了实现这一目标，需先构建基础的Django框架结构，在`settings.py`中的`INSTALLED_APPS`列表加入新创建的应用名称，并完成静态文件路径以及MySQL数据库连接的相关设定[^1]。 ```python # settings.py 中的部分配置示例 STATIC_URL = '/static/' MEDIA_URL = '/media/' # 图片资源访问URL前缀 MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # 文件保存位置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'your_database_name', # 数据库名字 'USER': 'root', # 用户名 'PASSWORD': 'password', # 密码 'HOST': 'localhost', # 主机地址 'PORT': '3306' # 端口号，默认为3306 } } ``` #### Django视图处理逻辑编写 定义用于接收前端发送过来的数据接口函数，该函数负责解析请求体内的图像信息和其他表单字段内容。通过Python内置模块如PIL来操作图片对象，再利用ORM模型实例化记录条目，最终调用save()方法将其持久化到关联表格里。 ```python from django.http import JsonResponse import json from .models import ImageModel # 假设有一个名为ImageModel的类对应着存储照片的信息表 from PIL import Image import base64 from io import BytesIO def upload_image(request): if request.method == "POST": try: data = json.loads(request.body.decode('utf-8')) image_data = data.get("image", None) img_binary = base64.b64decode(image_data.split(',')[1]) buffer = BytesIO(img_binary) pil_img = Image.open(buffer).convert('RGB') new_entry = ImageModel() output_buffer = BytesIO() pil_img.save(output_buffer, format='JPEG') byte_data = output_buffer.getvalue() from datetime import datetime now_time = str(datetime.now()).replace(':', '-').replace('.', '-') file_path = f'media/{now_time}.jpg' with open(file_path, 'wb+') as destination: destination.write(byte_data) new_entry.image_url = MEDIA_URL + '/' + now_time + '.jpg' other_form_fields = data.get("formFields", {}) for key, value in other_form_fields.items(): setattr(new_entry, key, value) new_entry.save() return JsonResponse({"status": "success"}, status=200) except Exception as e: return JsonResponse({ "error_message": str(e), "status": "failed" }, status=500) # models.py 定义数据模型 class ImageModel(models.Model): id = models.AutoField(primary_key=True) name = models.CharField(max_length=255) description = models.TextField(blank=True, null=True) created_at = models.DateTimeField(auto_now_add=True) updated_at = models.DateTimeField(auto_now=True) image_url = models.URLField(default='') class Meta: db_table = 'images' ``` #### 微信小程序端代码调整 在页面对应的JSON配置文档中声明所使用的Vant Weapp组件；接着于WXML模板布局处放置相应的控件标签；最后JS脚本部分则要封装好触发相机拍摄事件后的回调处理器，确保能正确获取返回的结果并通过API发起网络请求向服务端提交二进制流形式的照片资料连同其他必要的参数一同传递过去[^3]。 ```json // page.json { "usingComponents": { "van-uploader": "@vant/weapp/uploader/index" } } ``` ```html <!-- index.wxml --> <view> <button bindtap="takePhoto">点击拍照</button> <!-- 显示已选图片 --> <block wx:for="{{imgList}}" wx:key="index"> <image src="{{item}}"></image> </block> <van-uploader after-read="afterRead"/> </view> ``` ```javascript Page({ takePhoto () { const ctx = wx.createCameraContext(); ctx.takePhoto({ quality: 'high', success:async (res) => { this.setData({ tempFilePaths:[res.tempImagePath]}); let formData = {}; // 收集额外的表单项... await this.uploadFile(res.tempImagePath,formData); }, fail:(err)=>{ console.log(err.errMsg); } }); }, async uploadFile(filePath, formdata){ var that=this; wx.showLoading({ title:'正在上传...', mask:true, }); wx.uploadFile({ url:"http://example.com/upload/", // 后台提供的api地址 filePath:filePath, name:'file', formData:formdata, success:function(response){ response.data && JSON.parse(response.data); wx.showToast({ icon:'none', title:`${response.statusCode} ${response.data.status}`, }) setTimeout(function(){ wx.hideLoading(); },1000); }, fail:function(error){ wx.showToast({ icon:'none', title:error.errMsg || error.message, }) setTimeout(function(){ wx.hideLoading(); },1000); } }) } }) ```