微信小程序 图片的上传

news2024/12/27 1:17:19

错误示范

/*从相册中选择文件  微信小程序*/
	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.coloradmin.cn/o/2181648.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C++】 vector 迭代器失效问题

【C】 vector 迭代器失效问题 一. 迭代器失效问题分析二. 对于vector可能会导致其迭代器失效的操作有:1. 会引起其底层空间改变的操作,都有可能是迭代器失效2. 指定位置元素的删除操作--erase3. Linux下,g编译器对迭代器失效的检测并不是非常…

Python从入门到高手3.5节-程序实战之最小值算法

目录 3.5.1 算法思路 3.5.2 构造随机数 3.5.3 条件控制语句 3.5.4 完整的代码实现 3.5.5 大神薯条老师 3.5.1 算法思路 算法原理很简单,先任取两个数进行比较,以计算两个数中的最小值: 假设得到的最小值为min_,再用这两个数…

PaddleDetection 自定义训练目标检测

PaddleDetection是一个基于PaddlePaddle的目标检测端到端开发套件,在提供丰富的模型组件和测试基准的同时,注重端到端的产业落地应用,通过打造产业级特色模型|工具、建设产业应用范例等手段,帮助开发者实现数据准备、模型选型、模…

制造企业各部门如何参与生产成本控制与管理?

​国内制造业的分量可不轻,从日常生活用品到高端工业设备,中国制造几乎涵盖了各个领域。 不过很多制造业企业在管理方面确实存在一些难题:成本控制不容易,产品质量并不稳定,生产周期也常常较长。 一、中国制造业生产管…

基于SpringBoot+Vue+MySQL的考勤管理系统

系统展示 管理员界面 用户界面 系统背景 随着企业规模的扩大和管理的精细化,传统的考勤方式已经无法满足现代企业的需求。纸质签到、人工统计不仅效率低下,还容易出错。因此,开发一套基于SpringBootVueMySQL的考勤管理系统显得尤为重要。该系…

基于微信小程序医院应急设备管理系统(源码+定制+解答)

博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…

通过ChatGPT 提示词设定60种不同的写作风格

为 ChatGPT 编写正确的提示可以对您获得的响应类型产生很大影响。 您选择的写作风格会影响答案的语气、深度和清晰度。 本指南将帮助您发现 60 多种不同的写作风格,您可以与 ChatGPT 一起使用,以获得更多个性化 ChatGPT Prompt 中的写作风格是什么? ChatGPT 提示中的写作…

html空单元格的占位

先上代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title></head><body> <H1>我的WEB页面</H1><table border"2px" bgcolor"#7fffd4&…

Docker Compose 搭建 nacos 集群

主机准备 IProle192.168.142.155slave02192.168.142.156slave192.168.142.157master192.168.142.158slave03 在 slave03 上面准备 mysql services:mysql:image: mysql:8.0.31container_name: mysqlrestart: alwaysports:- 3306:3306volumes:- /data/nacos/nacos.sql:/data/n…

vue基于Spring Boot框架的高校实验室预约管理系统

目录 毕设制作流程功能和技术介绍系统实现截图开发核心技术介绍&#xff1a;使用说明开发步骤编译运行代码执行流程核心代码部分展示可行性分析软件测试详细视频演示源码获取 毕设制作流程 &#xff08;1&#xff09;与指导老师确定系统主要功能&#xff1b; &#xff08;2&am…

在java后端发送HTTPClient请求

简介 HttpClient遵循http协议的客户端编程工具包支持最新的http协议 部分依赖自动传递依赖了HttpClient的jar包 明明项目中没有引入 HttpClient 的Maven坐标&#xff0c;但是却可以直接使用HttpClient原因是&#xff1a;阿里云的sdk依赖中传递依赖了HttpClient的jar包 发送get请…

HTB:Archetype[WriteUP]

使用OpenVPN连接HTB服务器并启动靶机 靶机IP&#xff1a;10.129.95.187 分配IP&#xff1a;10.10.16.22 1.Which TCP port is hosting a database server? 使用nmap对靶机进行扫描&#xff1a;nmap -sC -sV -T4 -Pn {TARGET_IP} 通过nmap扫描结果可见&#xff1a; 1433 端口用…

C++ | Leetcode C++题解之第448题找到所有数组中消失的数字

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> findDisappearedNumbers(vector<int>& nums) {int n nums.size();for (auto& num : nums) {int x (num - 1) % n;nums[x] n;}vector<int> ret;for (int i 0; i < n;…

有效的字母异位词【字符串哈希】

题目 题解&#xff1a; 1.排序&#xff1a; #include<algorithm>class Solution{public:bool isAnagram(string s,string t){sort(s.begin(),s.end());sort(t.begin(),t.end());return st;} } 时间复杂度O(nlogn) 2.哈希表 #include<algorithm>int hash1[100]; …

旅游推荐|旅游推荐系统|基于Springboot+VUE的旅游推荐系统设计与实现(源码+数据库+文档)

旅游推荐系统 目录 基于java的旅游推荐系统设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师&#xf…

B端:常见通用模块有哪些,CRM除了通用模块,有哪些个性模块?

我经常把B端系统的功能模块分为通用模块和个性模块&#xff0c;通用模块是大部分系统都具备的功能&#xff0c;通用模块员工、日程、审批、代办等等&#xff0c;就是OA&#xff0c;通用模块生产、订单、物料、车间、设备、成本等等就是MES&#xff0c;这么说大家都晓得了吧&…

【pytorch】pytorch入门5:最大池化层(Pooling layers )

文章目录 前言一、定义概念 缩写二、参数三、最大池化操作四、使用步骤总结参考文献 前言 使用 B站小土堆课程 一、定义概念 缩写 池化&#xff08;Pooling&#xff09;是深度学习中常用的一种操作&#xff0c;用于降低卷积神经网络&#xff08;CNN&#xff09;或循环神经网…

Vue diff 算法介绍

首先我们来了解一下&#xff1a;diff 是什么&#xff1f; 通俗的讲&#xff0c;diff 就是比较两棵树&#xff0c;render 会生成两颗树&#xff0c;一棵新树 newVnode&#xff0c;一棵旧树 oldVnode&#xff0c;然后两棵树进行对比更新找差异就是 diff&#xff0c;全称 differe…

【cpp/c++ summary 工具】 Hunter 包管理器

Hunter 是一个跨平台cpp包管理器,点击查看支持的所有包的列表。 查看cmake是否满足 查看cmake是否满足Hunter版本要求&#xff1a; ubuntuDESKTOP-D7DRBER:~/CODE/mycpp/hunter-simple-master$ cmake --version cmake version 3.16.3CMake suite maintained and supported b…

88E1111使用技巧

一、88E1111简介 88E1111这款芯片是Marvel公司的产品&#xff0c;算是早期产品&#xff0c;但是市面上通用量较高&#xff0c;目前仍在大量使用&#xff0c;当然该公司也推出新产品&#xff0c;如88E1512&#xff0c;后续会有续篇&#xff0c;本篇文章重点讲述88E1111。 88E1…