uniapp使用uview2上传图片功能

server/2024/9/24 9:52:27/

 

官网地址Upload 上传 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

前提,需要下载vuew2插件 

<view class="upload"><view class="u-demo-block__content"><view class="u-page__upload-item"><u-upload :fileList="scoreFileList" @afterRead="afterRead" @delete="deletePic"multiple :maxCount="9" :previewFullImage="true"></u-upload></view></view>
</view>
data {  scoreFileList: []
}
     deletePic(event) {this.scoreFileList.splice(event.index, 1)},// 新增图片async afterRead(event) {let lists = [].concat(event.file);let fileListLen = this.scoreFileList.length;lists.map((item) => {this.scoreFileList.push({...item,status: "uploading",message: "上传中",});});for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise(lists[i].url);let item = this.scoreFileList[fileListLen];this.scoreFileList.splice(fileListLen,1,Object.assign(item, {status: "success",message: "",url: result,}));fileListLen++;}},uploadFilePromise(url) {return new Promise((resolve, reject) => {uni.uploadFile({url: 'http://www.example.com/upload', // 仅为示例,非真实的接口地址filePath: url,name: "file",success: (uploadFileRes) => {let res = JSON.parse(uploadFileRes.data);resolve(res.message);},fail: (err) => {console.log(err);},});});},

获取图片地址,数组形式

["4213.png", "6816.png"]

 let detai_thumbs = this.scoreFileList.map((item) => item.url);


http://www.ppmy.cn/server/121291.html

相关文章

HarmonyOS鸿蒙开发实战(5.0)悬浮窗拖拽和吸附动画实践

鸿蒙HarmonyOS NEXT开发实战往期文章必看&#xff08;持续更新......&#xff09; HarmonyOS NEXT应用开发性能实践总结 HarmonyOS NEXT应用开发案例实践总结合集 最新版&#xff01;“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线&#xff01;&#xff08;从零基础入门…

抓机遇,促发展——2025第十二届广州国际汽车零部件加工技术及汽车模具展览会

新能源时代&#xff0c;电动化、智能化正在重塑全球汽车市场格局。中国自主品牌新能源汽车的市占率不断提升、头部效应初显&#xff0c;更有机会带动相关供应链企业成长。中国的零部件企业有望抓住变局下的机会&#xff0c;在新一轮竞争中崛起。 智能电动车时代&#xff0c;汽车…

Windows11系统安装,配置CUDA、cuDNN等

已经有大几年没有安装过 Windows 的系统了&#xff0c;今天因为黑神话悟空&#xff0c;准备把 Win 11 装一台&#xff0c;玩玩游戏&#xff0c;顺便把一些 CUDA 相关的异步解析项目也安装到 Window 上。 下载安装 PE 因为十几年前&#xff0c;只会用 PE 装系统&#xff0c;所…

mysql学习教程,从入门到精通,SQL 删除表(DROP TABLE 语句)(20)

1、SQL 删除表&#xff08;DROP TABLE 语句&#xff09; 在SQL中&#xff0c;DROP TABLE语句用于删除数据库中的一个或多个表&#xff0c;同时删除表中的所有数据、索引、触发器、约束和表结构本身。这是一个非常强大的命令&#xff0c;因此在使用时需要格外小心&#xff0c;因…

基于单片机控制的程控开关电源研究

摘 要 : 在开关电源控制方案中 , 建立于单片机控制基础方式上的程控开关电源方案是一种比较有效的方式 。 利用单片机实现对程控开关的控制, 可以减少设计复杂度 、 增加控制可靠性 , 值得投入更多的精力进行研究和推进 。 本文就这一控制方法进行了详细的探讨 。 关键词…

基于web的工作管理系统设计与实现

博主介绍&#xff1a;专注于Java vue .net php phython 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟 我的博客空间发布了1000毕设题目 方便大家学习使用 感兴趣的…

AI辅助编码工具如何影响着程序员开发群体

AI辅助编码工具的出现对程序员开发群体产生了深远的影响&#xff0c;有一些初步基础的程序员&#xff0c;可以借助AI工具的加持&#xff0c;生产效率大大提升&#xff0c;达到中高级程序员的水平。 这些影响可以从多个角度来分析&#xff1a; 提高开发效率&#xff1a; AI工具…

基于drools和flowable实现的智能决策引擎

在现代企业中&#xff0c;业务流程的自动化和智能化是提高运营效率的关键。智能决策体系通过结合工作流引擎、规则引擎和大语言模型&#xff08;LLM&#xff09;&#xff0c;为企业提供了一种强大的决策支持工具。 智能决策引擎主要由三部分组成 工作流引擎&#xff1a;自动化…