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

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

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

一、需求概述

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

二、相关文档

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

说三遍,使用类似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.lryc.cn/news/41304.html

相关文章:

  • Linux - 进程控制(进程等待)
  • Python 可视化最频繁使用的10大工具
  • Windows与Linux端口占用、查看的方法总结
  • 48天强训 Day1 JavaOj
  • 崩溃的一瞬间
  • 13回归网络:HTTP/2是怎样的网络协议?
  • CSS学习笔记——基础选择器,字体属性,文本属性,三种样式表
  • 第十四届蓝桥杯三月真题刷题训练——第 16 天
  • 鸟哥的Linux私房菜 Shell脚本
  • FPGA基于RIFFA实现PCIE采集ov5640图像传输,提供工程源码和QT上位机
  • week13周报
  • 离散选择模型中的分散系数theta到底该放在哪里呢?
  • 【CSAPP】进程 | 上下文切换 | 用户视角下的并发进程
  • 节流还在用JS吗?CSS也可以实现哦
  • 带你看看 TypeScript 5.0 的新特性
  • C语言预处理条件语句的 与或运算
  • 从零实现深度学习框架——学习率调整策略介绍
  • 系统架构:经典三层架构
  • 数据结构--二叉树
  • Keil5安装和使用小记
  • 多机器人集群网络通信协议分析
  • 【PyTorch】手把手带你快速搭建PyTorch神经网络
  • 【完整代码】用HTML/CSS制作一个美观的个人简介网页
  • Java分布式事务(九)
  • 基于深度学习的动物识别系统(YOLOv5清新界面版,Python代码)
  • K8S集群之-ETCD集群监控
  • 一文弄懂熵、交叉熵和kl散度(相对熵)
  • 10从零开始学Java之开发Java必备软件Intellij idea的安装配置与使用
  • 04 - 进程参数编程
  • 【python进阶】你真的懂元组吗?不仅是“不可变的列表”