Uniapp chooseImage 选择图片 & 自定义上传

背景:

uniApp 开发过程中, 需要上传图片到自己的后端服务

按照官方文档上的写法, 取 tempFilePaths 获取到的是一个 blob:xxx 的文件流, 我们的后端服务不支持这样传参, 报错;

uni.chooseImage(OBJECT) | uni-app官网

步骤:

注意点:

  • uni.uploadFile 的 file 参数为自己后端服务定义的参数名

  • uni.uploadFile 的 filePath 为文件的实际路径

    methods: {
    chooseImg() {
    uni.chooseImage({
    success: function (res) {
    console.log(res.tempFiles[0]);
    uni.uploadFile({
    url: 'http://xxxxx/api/dp/file/uploads',
    header: {
    Authorization: 'eyJhbGb1xgiUrTPqXx5nkJg7hdw',
    "Content-Type": "application/x-www-form-urlencoded"
    },
    name: 'files',
    filePath: res.tempFiles[0].path,
    formData: {
    dirId: 145605211059456,
    appId: 1,
    // files: res.tempFiles[0],
    },
    success: (uploadFileRes) => {
    console.log(uploadFileRes.data);
    },

    复制代码
      					});
      				}
      			})
      		},
      	}

最终效果:

相关推荐
xuelong-ming2 小时前
uniapp vue3 点击跳转外部网页
vue.js·uni-app
一路向前的月光12 小时前
uniapp(2)自定义tabbar
uni-app
笨笨狗吞噬者13 小时前
【uniapp】小程序体积优化,分包异步化
前端·微信小程序·uni-app
00后程序员张13 小时前
iOS 26 开发者工具推荐,构建高效调试与性能优化工作流
android·ios·性能优化·小程序·uni-app·iphone·webview
游九尘14 小时前
uniapp安卓端+ fastapi(后端)获取到设备的ip
uni-app·fastapi
性野喜悲14 小时前
<script setup lang=“ts“>+uniapp实现轮播(swiper)效果
前端·javascript·vue.js·小程序·uni-app
2501_9160088914 小时前
iOS 26 文件导出与数据分析,多工具组合下的开发者实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9160088914 小时前
iOS混淆实战用多工具组合把IPA加固做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆
android·ios·小程序·https·uni-app·iphone·webview
wangdaoyin201014 小时前
UniApp 在手机端(Android)打开选择文件和文件写入
android·前端·uni-app
2501_9151063221 小时前
iOS 反编译防护工具与实战组合 从静态侦察到 IPA 成品加固的工程化路径
android·ios·小程序·https·uni-app·iphone·webview