uni-app ——使用uploadFile上传多张图片

news2025/1/21 18:53:32
前言:最近的工作中出现了一个功能点,具体写法我在前面的文章中已经阐述过,不过之前的情况是上传图片调用后端的一个接口,整个表单页面提交的时候调用的是另一个接口,我也从中学到了另外的一种方法,写到这里分享给大家。

一、需求概述

此次的后端接口需要三个参数,分别是文章标题和文章内容以及文章中的图片,在用户点击保存文章时需要这三个参数的传递。那么这个时候其实就已经完成了图片的上传以及文章的保存。

二、相关文档

做这个功能的过程中我更加确定了一件事情,一定要看文档,看文档,看文档!!!重要的事情

说三遍,使用类似uni-app这种api一定要看相关描述的官方文档,人家都说了是官方文档,就是写给开发人员参考使用的,所以就不要去瞎百度,找些乱七八糟的方法,我就遇到了这个坑,后来我还是看了官方文档解决的这个问题

这里已经使用uni-app中uploadFIle将本地临时资源提交到服务器中,但是请注意!!!!app的上传多张图片是必须要循环调用该api的,小程序暂时不支持上传多张图片,如下图所示:

三、具体实现方法

写到这里我真的想说句fuck为啥呢,因为我一直知道这个功能其实很简单,但是官方文档看的不仔细,又参考了一些乱七八糟的方法,最终还是回到了参考官方文档的这个方法,所以大家,恩,记得看文档!

具体的实现方法和参数说明

uni-app提供了uni.uploadFile方法来实现文件上传功能。该方法可以将本地的文件上传到服务器,并且可以携带额外的参数。使用uni.uploadFile方法可以方便地实现文件上传功能,具体步骤如下:

  1. 首先,调用uni.chooseImage或uni.chooseVideo方法选择文件,并在成功回调中获取文件的本地路径。

  1. 然后,调用uni.uploadFile方法,将文件上传到服务器。该方法需要提供如下参数:

  • url:上传文件的地址

  • filePath:要上传的文件的本地路径

  • name:服务器接收文件时对应的参数名

  • formData:除了文件之外要上传的数据,是一个对象。

  • success:上传成功后的回调函数

  • fail:上传失败后的回调函数

  • complete:上传完成后的回调函数

下面是一个简单的文件上传例子:

    saveArticle(data) {
                data.fi.forEach(item => {
                    uni.uploadFile({
                        url: `${base_url}/basic/pad/ut/article/saveImg`,
                        filePath: item,
                        name: 'fi',
                        formData: {
                            'til': data.til,
                            'con': data.con
                        },
                        header: {
                            'content-type': 'multipart/form-data'
                        },
                        success: (uploadFileRes) => {
                            console.log(uploadFileRes, '=》》》》》');
                            uni.showToast({
                                title: '上传成功!'
                            })
                        }
                    })
                })
            },

上面的代码中,我们选择了一张图片进行上传,然后通过uni.uploadFile方法将该图片上传到服务器上。其中,'your_upload_url'是上传文件的地址,'file'对应服务器端接收文件时的参数名,formData中包含了上传文件时携带的额外参数。上传成功后,可以在success回调函数中获取服务器返回的数据。

需要注意的是,uni.uploadFile方法在小程序和APP端调用时参数不一样,请根据实际情况进行修改。

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

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

相关文章

UniApp Scroll-View 设置占满下方剩余高度的方法小记

前言:点滴积累,贵在坚持一、布局描述:屏幕分为上下两部分,上面部分高度固定,比如 400rpx(单位可以指定为其他的比如px、upx等,高度也可以自己设定),下面部分为 scroll-vi…

css渐变

1. 线性渐变(是从一个方向到另一个方向的渐变) 属性值:background:linear-gradient(颜色) ✍默认值:从上到下线性渐变: 代码: 结果: ✍ 属性延伸&#x…

axios—使用axios请求REST接口—发送get、post、put、delete请求

文档:GitHub - axios/axios: Promise based HTTP client for the browser and node.js 目录 一、axios发送get请求 简写版get请求 完整版get请求 get请求怎么在路径上携带参数 二、axios发送post请求 简写版post请求 完整版post请求 其他方式发送post请求 三…

HBuilderX 安装教程

💌 所属专栏:【软件安装教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! &#x1f496…

element日期选择器el-date-picker样式

1、基本用法 代码&#xff1a; <el-date-pickertype"date"v-model"valueStart"value-format"yyyy-MM-dd"placeholder"开始时间" ></el-date-picker>代码解读&#xff1a; type参数是用来定义选择器选择的对象&#xff…

【汇总3种】vue项目中【H5】如何处理后端返回的支付宝form表单,如何实现支付跳转?

背景&#xff1a; 现在的项目&#xff0c;都需要付款&#xff0c;难免涉及支付宝或者微信支付。如果是支付宝支付&#xff0c;很多人都说&#xff0c;都已经2202年了&#xff0c;支付宝返回的还是form表单&#xff0c;然后&#xff0c;唤起支付宝的界面。 一般来说&#xf…

【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例

本案例源码链接&#xff08;非VIP可私聊获取&#xff09;&#xff1a;https://download.csdn.net/download/weixin_52212950/86286910https://download.csdn.net/download/weixin_52212950/86286910 文章导读&#xff1a; 这篇文章实现一个小案例&#xff1a;在购物平台选商品…

axios二次封装(详细+跨域问题)

一&#xff0c;为什么要对axios进行二次封装&#xff1f; 答&#xff1a;主要是要用到请求拦截器和响应拦截器; 请求拦截器&#xff1a;可以在发请求之前可以处理一些业务 响应拦截器&#xff1a;当服务器数据返回以后&#xff0c;可以处理一些事情 二&#xff0c;axios的二次…

html/javascript实现简单的上传

一、 上传用到的按钮类型是type file 二、 为了美化上传按钮&#xff0c;我们通常会自定义按钮&#xff0c;将默认的上传隐藏掉。 fileInputs.click() 触发上传按钮点击 三、 new FileReader() 读取文件内容方法&#xff1a; readAsText() 读取文本文件&#xff0c;(可以使用…

NodeJs - for循环的几种遍历方式

NodeJs - for循环的几种遍历方式一. for循环的几种遍历方式1.1 遍历的目标不一样1.2 空属性的遍历1.3 异步的调用二. 总结一. for循环的几种遍历方式 我们先来看下for循环的4种不同遍历方式&#xff1a; const arr [10,20,30,40,50];for (let i 0; i < arr.length; i) {…

VUE 年份范围选择器

VUE 年份范围选择器遇到一个需求,需要写一个年份选择器,是范围的年份选择器,比如:xxx年到xxx年 在使用elment UI的时候发现没有这种功能,于是采用el-date-picker 的年份选择器自己后封装了一个年份范围选择器 由于组件使用的地方很多,所以格式化都在组件中处理,回传格式在回传的…

Vue项目实战-vue2(移动端)

Vue项目实战(移动端)# 相关资料(一) 创建项目(二) 禁用Eslint(三) devtool(四) 添加less支持(五) vue路由配置(背诵)(六) 父子组件通信(背诵)(七) axios拦截器(背诵)(八) Sticky 粘性布局(九) 图片懒加载(十) 全局注册组件(十一) slot插槽(十二) 使用ui库需要关注的三点(十三)…

【Vue】Vue的安装

&#x1f3c6;今日学习目标&#xff1a;Vue3的安装 &#x1f603;创作者&#xff1a;颜颜yan_ ✨个人格言&#xff1a;生如芥子&#xff0c;心藏须弥 ⏰本期期数&#xff1a;第一期 &#x1f389;专栏系列&#xff1a;Vue3 文章目录前言Vue3安装独立版本CDN安装第一个Vue程序总…

vue递归组件—开发树形组件Tree--(构建树形菜单)

在 Vue 中&#xff0c;组件可以递归的调用本身&#xff0c;但是有一些条件&#xff1a; 该组件一定要有 name 属性要确保递归的调用有终止条件&#xff0c;防止内存溢出不知道大家有没遇到过这样的场景&#xff1a;渲染列表数据的时候&#xff0c;列表的子项还是列表。如果层级…

Vue基础--webpack介绍以及基础配置

写在最前&#xff1a;实际开发中需要自己配置webpack吗&#xff1f; 答案&#xff1a;不需要&#xff01; 实际开发中会使用命令行工具&#xff08;俗称CLI&#xff09;一键生成带有webpack的项目开箱即用&#xff0c;所有webpack的配置项都是现成的&#xff01;我们只需要知道…

python web开发基础

网站是存储在服务器上的文件&#xff0c;服务器是托管网站的计算机。这些服务器连接到一个称为 Internet 的网络。访问这些网站的计算机称为“客户端”。 要访问网站需要知道其IP地址&#xff0c;IP 地址是一串唯一的数字。每个设备都有一个 IP 地址。可以在控制台cmd输入命令…

前端笔记(10) Vue3 Router 监听路由参数变化

前言 Vue Router是开发Vue项目的必不可少的工具&#xff0c;也是极为重要的学习要点。 本篇介绍下Vue Router的基础使用和如何监听路由参数变化。 Vue Router入门 1 安装Router 安装Vue Router非常方便&#xff0c;只需执行一个命令&#xff0c;如果还不知道怎么搭建Vue项目…

详解 HttpServletResponse

详解 HttpServletResponse 核心方法代码示例1.设置响应状态码2.设置响应头3.设置响应内容&#xff08;1&#xff09;响应一个网页&#xff08;简单HTML&#xff09;&#xff08;2&#xff09;响应一个网页&#xff08;复杂HTML&#xff09;返回已有的一个网页1.重定向2.转发返回…

uniapp - 编译微信小程序项目的微信授权登录、获取微信手机号登录、最新版微信直接登录、手机与验证码登录的示例源码(适用于 uniapp 微信小程序项目,源代码直接开箱即用)超级详细的代码及注释

效果图 uniapp 项目编译微信小程序,一些常见的登录方式及源代码,示例代码干净整洁无BUG拿来即用。 本文示例实现了 uniapp 微信小程序项目的登录功能,包含微信授权登录、获取微信手机号登录、最新直接登录等, 你可以选择一个,直接复制源代码,稍微改改就能应用到你的项目…

后台管理系统

后台管理系统主要是我们内部人员使用的一款用来管理我们产品的一个系统&#xff0c;然后呢&#xff0c;我们今天写的呢是一个电商的后台管理系统。主要是可以用来管理我们的用户还有我们是商品的。 我们这个系统呢采用的是一个前后端分离的模式&#xff0c;主要是使用后端给我…