uniapp使用uview2上传图片功能

devtools/2024/9/24 14:47:20/

 

官网地址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/devtools/116552.html

相关文章

VMware安装飞牛私有云fnOS并挂载小雅Alist实现异地远程访问

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

2.4K star的GOT-OCR2.0:端到端OCR 模型

GOT-OCR2.0是一款新一代的光学字符识别&#xff08;OCR&#xff09;技术&#xff0c;标志着人工智能在文本识别领域的重大进步。作为一款开源模型&#xff0c;GOT-OCR2.0不仅支持传统的文本和文档识别&#xff0c;还能够处理乐谱、图表以及复杂的数学公式&#xff0c;为用户提供…

排序算法Java实现

文章目录 排序算法概述比较排序算法非比较排序算法稳定 vs 不稳定Java 中的排序 外部排序1) 冒泡排序2) 选择排序3) 堆排序4) 插入排序5) 希尔排序6) 归并排序递归实现时间复杂度非递归实现 7) 归并插入8) 快速排序随机基准点处理重复值 9) 计数排序10) 桶排序11) 基数排序 排序…

常用的k8s容器网络模式有哪些?

常用的k8s容器网络模式包括Bridge模式、Host模式、Overlay模式、Flannel模式、CNI&#xff08;ContainerNetworkInterface&#xff09;模式。K8s的容器网络模式多种多样&#xff0c;每种模式都有其特点和适用场景。Bridge模式适用于简单的容器通信场景&#xff1b;Host模式适用…

python对文件的写入和追加

写入文件 1.打开文件 文件可以是不存在的&#xff0c;不存在就会创建 f open(./test.txt, w, encoding"utf-8")2.写数据到内存中 f.write("你好&#xff0c;世界")3.写到硬盘中 f.flush()#或者 close()有刷新的功能 f.close()整体代码 #打开文件 f …

大数据:快速入门Scala+Flink

一、什么是Scala Scala 是一种多范式编程语言&#xff0c;它结合了面向对象编程和函数式编程的特性。Scala 这个名字是“可扩展语言”&#xff08;Scalable Language&#xff09;的缩写&#xff0c;意味着它被设计为能够适应不同规模的项目&#xff0c;从小型脚本到大型分布式…

AOT源码解析4.1-model主体解析

1 输入数据 VOS的数据集处理操作可见数据集操作&#xff0c;这里是进行数据集提取完毕后的操作。 图2&#xff1a;如图所示&#xff0c;使用datasets提取出数据之后&#xff0c;在模型训练阶段对数据做图中操作。即&#xff1a;将batch_size大小的ref_imgs、prev_imgs&#x…

无人机之战斗机的详解!

一、高性能飞行能力 高速飞行&#xff1a;具备较高的巡航速度和最大飞行速度&#xff0c;以便快速抵达任务区域并灵活应对战场情况。 长航程&#xff1a;拥有足够的航程以执行远程任务&#xff0c;覆盖广阔的作战区域 高升限&#xff1a;能够飞行到较高的高度&#xff0c;以…