微信小程序 图片的上传

错误示范

/*从相册中选择文件  微信小程序*/chooseImage(){wx.chooseMedia({count: 9,mediaType: ['image'],sourceType: ['album'],success(res) {wx.request({url:"发送的端口占位符",data:res.tempFiles[0].tempFilePath,method:'POST',success(res){//请求成功后应该返回的是分割完成的图片(Arraybuffer 类型)res.data},fail(err){console.error('图片发送请求错误:'err.errMsg+',错误码:'+err.error,)}})}})},

两个致命错误(是菜鸟勿笑):

  • 首先wx.request的data是用来发送文本数据的,最多可以发送Arraybuffer的音频数据,这里应该使用 wx.uploadFile来上传图片到后端。
  • 其次res.tempFiles[0].tempFilePath表示的也只是图片的临时路径,发送图片应该将图片文件转换成 FormData 对象。
/*从相册中选择文件  微信小程序*/chooseImage(){wx.chooseMedia({count: 1, // 选择图片的数量,只需要选择一张图片mediaType: ['image'],sourceType: ['album'],success(res) {// 只关心第一张图片const tempFilePath = res.tempFiles[0].tempFilePath;const formData = new FormData();formData.append('file', {name: 'image.jpg', // 指定文件名uri: tempFilePath,type: 'image/jpeg', // 文件类型});wx.uploadFile({url: "发送的端口占位符", filePath: tempFilePath,name: 'file', // 与后端约定的文件对应的 key, formData: formData, // 如果有额外的表单数据,可以在这里添加success(uploadRes) {console.log('图片上传成功', uploadRes);// 这里可以处理上传成功后的逻辑,比如解析服务器返回的数据},fail(err) {console.error('图片上传请求错误:', err.errMsg);}});},fail(err) {console.error('选择图片失败:', err.errMsg);}});},

打脸了,

在微信小程序中,FormData 不是一个内置的全局对象,所以你会看到 ReferenceError: FormData is not defined 这样的错误。在小程序中,你不需要创建 FormData 对象,因为 wx.uploadFile 方法会自动处理文件的上传。

	chooseImage(){wx.chooseMedia({count: 1, // 选择图片的数量,只需要选择一张图片mediaType: ['image'],sourceType: ['album'],success(res) {// 只关心第一张图片const tempFilePath = res.tempFiles[0].tempFilePath;wx.uploadFile({url: "http://127.0.0.1:5000/upimage", filePath: tempFilePath,name: 'file', // 与后端约定的文件对应的 key, success(uploadRes) {console.log('图片上传成功', uploadRes);// 这里可以处理上传成功后的逻辑,比如解析服务器返回的数据},fail(err) {console.error('图片上传请求错误:', err.errMsg);}});},fail(err) {console.error('选择图片失败:', err.errMsg);}});}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/436827.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java在用增强for循环遍历集合时删除元素,抛出java.util.ConcurrentModificationException异常

文章目录 0. 前言1. 问题产生的背景2. Java中增强for循环的底层原理3. 为什么增强for循环不支持在遍历集合时删除元素3.1 问题排查3.2 modCount 变量的来源3.3 expectedModCount 变量的来源3.4 导致modCount变量和expectedModCount不相等的原因3.5 为什么用迭代器遍历元素时删除…

【Nacos架构 原理】内核设计之Nacos通信通道

文章目录 Nacos通信通道 (长链接)现状背景场景分析配置服务 长链接核心诉求功能性诉求负载均衡连接生命周期 Nacos通信通道 (长链接) 现状背景 Nacos 1.X 版本 Config/Naming 模块各自的推送通道都是按照自己的设计模型来实现的…

仪器数码管数字识别系统源码分享

仪器数码管数字识别检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Comput…

Glide基本用法及With方法源码解析

文章目录 引入优点 使用步骤导入依赖权限使用 其他用法占位符错误图片后备回调符圆角过渡动画大小调整gif缩略图 使用RequestOptions缓存机制设置缓存策略清理缓存 使用集成库OkHttpVolley with源码解析getRetrieverGlide.getinitializeGlide getRequestManagerRetriever Reque…

【Spine】引入PhotoshopToSpine脚本

引入 右键Photoshop图标,选择属性 打开文件所在位置 找到目录下的\Presets\Scripts文件夹。 找到Spine目录下的\scripts\photoshop文件夹下的PhotoshopToSpine.jsx 复制它,丢到Photoshop刚才找的那个目录下。 使用 打开.psd文件,检查不要…

ubuntu 安装harbor

#安装包 wget https://github.com/goharbor/harbor/releases/download/v2.10.3/harbor-offline-installer-v2.10.3.tgz wget https://github.com/goharbor/harbor/releases/download/v2.10.3/harbor-offline-installer-v2.10.3.tgz.asc#导入签名公钥 gpg --keyserver hkps://ke…

文心一言 VS 讯飞星火 VS chatgpt (359)-- 算法导论24.3 1题

一、在图 24-2上运行Dijkstra算法,第一次使用结点 s s s作为源结点,第二次使用结点 z z z作为源结点。以类似于图 24-6 的风格,给出每次while循环后的 d d d值和 π π π值,以及集合 S S S中的所有结点。如果要写代码&#xff0c…

计算机毕业设计Spark+PyTorch股票预测系统 股票推荐系统 股票可视化 股票数据分析 量化交易系统 股票爬虫 股票K线图 大数据毕业设计 AI

《SparkPyTorch股票预测系统》开题报告 一、研究背景与意义 随着信息技术的飞速发展和全球金融市场的日益繁荣,股票投资已成为广大投资者的重要选择之一。然而,股票市场的复杂性和不确定性使得投资者在做出投资决策时面临巨大的挑战。传统的股票分析方…

Python空间地表联动贝叶斯地震风险计算模型

🎯要点 使用贝叶斯推断模型兼顾路径和场地效应,量化传统地理统计曲线拟合技术。使用破裂和场地特征等地质信息以及事件间残差和事件内残差描述数学模型模型使用欧几里得距离度量、角距离度量和土壤差异性度量确定贝叶斯先验分布和后验分布参数&#xff…

CTMO时代下的营销新力量:2+1链动模式AI智能名片商城小程序

在当今这个瞬息万变的商业世界里,营销领域正经历着一场深刻的变革。传统的CMO岗位似乎在时代的浪潮中逐渐失去了它的光芒,CTMO正在悄然取代传统CMO的岗位。 随着营销丛林现象的出现,企业面临着前所未有的挑战。许多企业发现,那些传…

【SQL】未订购的客户

目录 语法 需求 示例 分析 代码 语法 SELECT columns FROM table1 LEFT JOIN table2 ON table1.common_field table2.common_field; LEFT JOIN(或称为左外连接)是SQL中的一种连接类型,它用于从两个或多个表中基于连接条件返回左表…

动态分配内存

目录 前言 一.malloc,free函数 1.malloc,free函数原型 2.使用方法 3.具体实例 4.注意事项 二.calloc函数 1.calloc函数原型 2.主要特点 3.使用案例 三.realloc函数 1.realloc函数原型 2.使用案例 3.注意事项 前言 动态内存是指在程序运行时,按需分配和…

51单片机学习第六课---B站UP主江协科技

DS18B20 1、基本知识讲解 2、DS18B20读取温度值 main.c #include<regx52.h> #include"delay.h" #include"LCD1602.h" #include"key.h" #include"DS18B20.h"float T; void main () {LCD_Init();LCD_ShowString(1,1,"temp…

时序必读论文14|VLDB24 TFB:全面且公平的时间序列预测方法框架

论文标题&#xff1a;TFB: Towards Comprehensive and Fair Benchmarking of Time Series Forecasting Methods 论文链接&#xff1a;https://arxiv.org/pdf/2403.20150.pdf 代码链接&#xff1a;https://github.com/decisionintelligence/TFB 前言 五一过后读的第一篇文章…

矩阵系统源码搭建的具体步骤,支持oem,源码搭建

一、前期准备 明确需求 确定矩阵系统的具体用途&#xff0c;例如是用于社交媒体管理、电商营销还是其他领域。梳理所需的功能模块&#xff0c;如多账号管理、内容发布、数据分析等。 技术选型 选择适合的编程语言&#xff0c;如 Python、Java、Node.js 等。确定数据库类型&…

计算机毕业设计 基于Python的广东旅游数据分析系统的设计与实现 Python+Django+Vue Python爬虫 附源码 讲解 文档

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

Qt 中的 QListWidget、QTreeWidget 和 QTableWidget:简化的数据展示控件

Qt 中的 QListWidget、QTreeWidget 和 QTableWidget&#xff1a;简化的数据展示控件 在 Qt 的用户界面开发中&#xff0c;展示和管理数据是常见的需求。Qt 提供了丰富的控件供开发者选择&#xff0c;其中 QListWidget、QTreeWidget 和 QTableWidget 是三个高层封装控件&#x…

vue实现文件解压缩

1. 使用CompressionStream API实现压缩 这里开启了多线程解压缩 <template><div class"page"><input type"file" placeholder"选择文件" id"file" /><button click"compress(compress)">压缩<…

uplink 级联口

Uplink 播报编辑讨论上传视频 交换机上的一种端口 展开2个同名词条 本词条缺少概述图&#xff0c;补充相关内容使词条更完整&#xff0c;还能快速升级&#xff0c;赶紧来编辑吧&#xff01; 在点到多点系统中&#xff0c;由分散点到集中点的传输链路。例如&#xff1a;在移动…

yolov8训练数据集——labelme的json文件转txt文件

yolov8的环境搭建&#xff0c;参考&#xff1a;Home - Ultralytics YOLO Docs 1.把标注好的json文件和jpg放同一个目录下。 2.运行转换脚本文件labelme2yolo.py文件&#xff1a; # -*- coding: utf-8 -*-import os import numpy as np import json from glob import glob im…