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

uniapp——上传图片获取到file对象而非临时地址——基础积累

最近在看uniapp的代码,遇到一个需求,就是要实现上传图片的功能
uniapp 官网地址:https://uniapp.dcloud.net.cn/

上传图片有对应的API:
uni.chooseImage方法:https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage
此方法可以通过【从本地相册选择图片或使用相机拍照】来获取图片的临时地址:
在这里插入图片描述
接口返回的参数有:【tempFilePaths】和【tempFiles】两个
在这里插入图片描述
现在需要将【tempFiles】中的【file】对象上传到后端提供的接口。

然后通过uni.unploadFile将临时地址上传到网络获取网络地址。

但是如果后端不支持临时地址进行上传,仅支持file文档流。

但是经过测试,uni.request是不支持formdata格式的。

所以我这边最后的处理方法,是通过fetch进行传递,完整代码如下:

uni.chooseImage({count: 1, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有sourceType: ['album'], //从相册选择success: (res) => {let file = res.tempFiles[0];var formData = new FormData();formData.append('image', file)var requestOptions = {method: 'post',headers: {Authentication: uni.getStorageSync('userToken')},body: formData,};fetch(`${this.$store.state.pathUrl}/member/update_img`,requestOptions).then((response) => {return response.json();}).then(res => {console.log(res);if (res.code == '1000') {uni.showToast({title:res.message,})}else{uni.showToast({title:res.message,icon:'error'})}})}
})

完成!!!多多积累,多多收获!!!

http://www.lryc.cn/news/383414.html

相关文章:

  • vue3 antdv RadioButton默认值选择问题处理
  • 最佳实践,一款基于 Flutter 的桌面应用
  • python第一个多进程爬虫
  • 在Ubuntu 18.04上安装和配置Ansible的方法
  • 【详细教程】如何使用YOLOv10进行图片与视频的目标检测
  • LLM大语言模型-AI大模型全面介绍
  • 瑜伽馆管理系统的设计
  • JAVA【案例5-2】模拟默认密码自动生成
  • 小区业主管理系统
  • vncsever ,window 远程ubuntu远程界面安装方式,VNC Viewer安装教程+ linux配置server 操作
  • java spring boot 单/多文件上传/下载
  • C语言的内存函数
  • 【网络通信】计算机网络安全技术总结
  • Redis-实战篇-什么是缓存-添加redis缓存
  • 《妃梦千年》第十一章:再遇故人
  • 反序列化底层学习
  • 项目训练营第五天
  • 数据收集和数据分析
  • Kubernetes(K8s)从入门到精通系列之十九:Operator模式
  • vuex的actions返回结果类型是promise及actions方法互相调用
  • 【干货】Jupyter Lab操作文档
  • iOS分享到微信,配置Universal Links,并从微信打开app,跳转到指定界面
  • 基于SSM构建的校园失眠与压力管理系统的设计与实现【附源码】
  • SAP 初始化库存移动类型561501511区别简介
  • 情感搞笑聊天记录视频:AI自动化生成技术,操作简单,教程+软件
  • RabbitMQ中lazyqueue队列
  • Java三层框架的解析
  • 算法设计与分析 笔记
  • mapreduce的工作原理
  • vue中v-bind和v-model有什么区别