当前位置: 首页 > news >正文

微信小程序 图片的上传

错误示范

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

相关文章:

  • 软件测试人员发现更多程序bug
  • Nagle 算法:优化 TCP 网络中小数据包的传输
  • C#入门教程
  • 【MySQL报错】---Data truncated for column ‘age‘ at row...
  • Go基础学习08-并发安全型类型-通道(chan)深入研究
  • some 蓝桥杯题
  • [linux 驱动]input输入子系统详解与实战
  • 2023_Spark_实验十:Centos_Spark Local模式部署
  • pyecharts-快速入门
  • vue3打包疯狂报错
  • STM32 软件触发ADC采集
  • Android SystemUI组件(08)睡眠灭屏 锁屏处理流程
  • C# 表达式与运算符
  • SpringBoot--最大连接数和最大并发数
  • CF687D Dividing Kingdom II 题解
  • 高空抛物AI检测算法:精准防控,技术革新守护城市安全
  • html+css+js实现Collapse 折叠面板
  • RM服务器研究(一)
  • 云岚到家xxl job 配置
  • 国内动态短效sk5
  • 【路径规划】路径平滑算法,A星算法拐点的圆弧化处理
  • 【寻找one piece的算法之路】——双指针算法!他与她是否会相遇呢?
  • UFS 3.1架构简介
  • 注册安全分析报告:科研诚信查询平台无验证方式导致安全隐患
  • 04.useTitle
  • ROS2中的srv、action、发布订阅三种方式
  • HarmonyOS/OpenHarmony 自定义弹窗页面级层级控制解决方案
  • C/C++进阶(一)--内存管理
  • docker-compose 快速部署clickhouse集群
  • 闯关训练三:Git 基础知识