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

【uniapp】uview1.x使用upload上传图片

和2.x不同的是,要用 action 来配置后端上传图片的接口地址;
再来一些配置项的命名有所不同,一般1.x的命名用 -,2.x的命名使用小驼峰;
1.x 的上传会自带删除时的提示框,2.x 没有;

重要的几个配置项有:

<u-upload :file-list="picList" :action="baseUrl" :before-upload="beforeUpload":before-remove="beforeRemove"
></u-upload>

picList 初始化为一个空数组,是用来保存图片的列表
baseUrl 为后端上传图片的接口
beforeUpload 为图片上传之前的回调
beforeRemove 为图片删除之前的回调

这两个回调函数的参数皆为:indexlist,指当前的图片的下标和已有图片的列表
图片上传:

beforeUpload(index, list) {this.picList = []// console.log('list',list);list.map(async item => {this.picList.push({url: item.url})let result = await this.uploadFilePromise(item.url);console.log(result);})console.log('照片列表',this.picList);},// 上传图片uploadFilePromise(url) {return new Promise((resolve, reject) => {uni.uploadFile({// 仅为示例,非真实的接口地址url: `${BASE_URL}/api/pic/upload`,filePath: url,name: "file",formData: {typeEnum: "IMAGE",},success: (res) => {resolve(res.data);console.log(res);},});});},

照片列表打印结果:
在这里插入图片描述
上传成功的返回结果:
在这里插入图片描述
补充比较常用的:
max-count="9":用来设置最大可上传图片数量
:max-size="5 * 1024 * 1024" :用来单张图片可上传的大小

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

相关文章:

  • 基于nodejs+vue食力派网上订餐系统
  • 软件测试常用的8种功能测试类型有哪些?
  • 动态规划之01背包问题
  • 安防监控项目---boa服务器的移植
  • Gson 字符串常用转换方式(集合转换为Json数组
  • MyBatis的使用(XML映射文件)
  • localhost知识
  • PyTorch入门学习(八):神经网络-卷积层
  • 【EI会议征稿】 2024年遥感、测绘与图像处理国际学术会议(RSMIP2024)
  • MySQL 8 - 处理 NULL 值 - is null、=null、is not null、<> null 、!= null
  • 高教社杯数模竞赛特辑论文篇-2018年C题:大型百货商场会员画像描述(附获奖论文及MATLAB代码实现)
  • #力扣:2315. 统计星号@FDDLC
  • 设计模式——单例模式详解
  • 一、W5100S/W5500+RP2040树莓派Pico<静态配置网络信息>
  • 【C++的OpenCV】第十四课-OpenCV基础强化(二):访问单通道Mat中的值
  • elementUI el-collapse 自定义折叠面板icon 和 样式 或文字展开收起
  • 如何用个人数据Milvus Cloud知识库构建 RAG 聊天机器人?(上)
  • 2023年江西省“振兴杯”工业互联网安全技术技能大赛暨全国大赛江西选拔赛 Write UP
  • PostMan 之 Mock 接口测试
  • LuatOS-SOC接口文档(air780E)--libgnss - NMEA数据处理
  • 基于华为云 IoT 物联网平台实现家居环境实时监控
  • 【开源框架】Glide的图片加载流程
  • win10下Mariadb绿色版安装步骤
  • wiresharak捕获DNS
  • vue源码分析(一)——源码目录说明
  • 【深度学习】吴恩达课程笔记(二)——浅层神经网络、深层神经网络
  • UI自动化概念 + Web自动化测试框架介绍
  • 在 macOS 上的多个 PHP 版本之间切换
  • 地址解析协议ARP
  • Go学习第十三章——Gin入门与路由