uniapp使用uview2上传图片功能

news2024/11/15 17:55:02

 

官网地址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.coloradmin.cn/o/2151303.html

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

相关文章

进程状态的优先级

1.进程的状态&#xff08;所有系统&#xff09; 因为是对于所有系统的&#xff0c;所以描述会很抽象。 补充知识&#xff1a; 并行和并发 并行&#xff1a;多个进程再多个cpu下分别同时运行并发&#xff1a;多个进程在一个cpu下采取进程切换的方式&#xff0c;在一段时间内&…

fiddler抓包06_抓取https请求(chrome)

课程大纲 首次安装Fiddler&#xff0c;抓https请求&#xff0c;除打开抓包功能&#xff08;F12&#xff09;还需要&#xff1a; ① Fiddler开启https抓包 ② Fiddler导出证书&#xff1b; ③ 浏览器导入证书。 否则&#xff0c;无法访问https网站&#xff08;如下图&#xff0…

prometheus通过nginx-vts-exporter监控nginx

Prometheus监控nginx有两种方式。 一种是通过nginx-exporter监控&#xff0c;需要开启nginx_stub_status,主要是nginx自身的status信息&#xff0c;metrics数据相对较少&#xff1b; 另一种是使用nginx-vts-exporter监控&#xff0c;但是需要在编译nginx的时候添加nginx-module…

MyBatis 分批次执行(新增,修改,删除)

import com.google.common.collect.Lists;import java.util.Iterator; import java.util.List; import java.util.function.Consumer;/*** Description mybatis分批插入数据使用* Author WangKun* Date 2024/9/19 11:20* Version*/ public class MyBatisSqlUtils {/*** param d…

用户态缓存:高效数据交互与性能优化

目录 1. 用户态缓存区工作背景 1.1 为什么每条连接都需要读写缓存区 1.1.1 读缓存区&#xff08;Read Buffer&#xff09; 1.1.2 写缓存区&#xff08;Write Buffer&#xff09; 1.2 用户态缓存区的工作流程 1.3 用户态缓存区的重要性 2. UDP 和 TCP 的设计差异 2.1 UD…

神经网络 卷积层 参数共享

参数共享常用于神经网络卷积层中&#xff0c;共享的实际上就是说卷积核中的参数一直保持不变&#xff0c;如下所示就可以称为共享参数啦&#xff01;&#xff01;

C# 实时流转换为m3u8

主要通过FFmpeg 执行命令进行转换 FFmpeg 下载地址 命令行 ffmpeg -i "rtsp://your_rtsp_stream_address" -codec: copy -start_number 0 -hls_time 10 -hls_list_size 12 -f hls "output.m3u8"start_number 设置播放列表中最先播放的索引号&#xff0c;…

JVM基础篇学习笔记

【注&#xff1a;本文章为自学笔记&#xff0c;仅供学习使用。】 一、JVM简介 JVM是Java虚拟机的缩写&#xff0c;本质上是运行在计算机上面的程序&#xff0c;作用是运行Java字节码文件。 1.1 JVM的功能 Java如果不做优化&#xff0c;则性能不如C/C&#xff0c;因为后者会…

uv-ui组件的使用——自定义输入框的样式

一、官网的使用 二、自定义修改样式 我是在小程序中使用此组件 想要自定义修改样式的话&#xff0c;需要placeholderClass加上 placeholderStyle配合使用 tip1&#xff1a;单独使用placeholderClass&#xff0c;他只会第一次渲染时生效&#xff0c;输入文字再清除后就不生效…

Spring面试题合集

Spring 1.谈谈你对Spring的理解 首先Spring是一个轻量级的开源框架&#xff0c;为Java程序的开发提供了基础架构支持&#xff0c;简化了应用开发&#xff0c;让开发者专注于开发逻辑&#xff1b; 同时Spring是一个容器&#xff0c;它通过管理Bean的生命周期和依赖注入&#…

flask项目初始化

1、初始环境 python3.8 2、flask文档地址&#xff1a;https://flask.palletsprojects.com/en/latest/installation/#install-flask 3、初始化项目 $ mkdir myproject $ cd myproject $ python3 -m venv .venv $ . .venv/bin/activate $ pip install Flask4、打开项目mypr…

机器翻译之多头注意力(MultiAttentionn)在Seq2Seq的应用

目录 1.多头注意力&#xff08;MultiAttentionn&#xff09;的理念图 2.代码实现 2.1创建多头注意力函数 2.2验证上述封装的代码 2.3 创建 添加了Bahdanau的decoder 2.4训练 2.5预测 3.知识点个人理解 1.多头注意力&#xff08;MultiAttentionn&#xff09;的理念图…

云服务器使用

最近搭建一个内网穿透工具&#xff0c;推荐一个云服务器&#xff1a; 三丰台&#xff1a;https://www.sanfengyun.com/ 作为学生党这个服务器是免费的可以体验使用&#xff01;可以使用免费虚拟主机和云服务器&#xff0c;写一个申请的基本步骤方便大家构建 申请步骤&#x…

11.1图像的腐蚀和膨胀

基本概念-图像腐蚀 图像腐蚀是一种用于去除图像中小的对象或者突出物体边缘的形态学操作。 图像腐蚀&#xff08;erosion&#xff09;的基本概念 图像腐蚀通常用于二值图像&#xff0c;其基本原理是从图像中“侵蚀”掉一些像素点&#xff0c;这些像素点通常是边界上的或者是孤…

Word中引用参考文献和公式编号的方法

文章目录 应用参考文献对于单个文献引用多于多个文献同时引用 公式编号手动编号自动编号 参考&#xff1a; 应用参考文献 对于单个文献引用 word中的参考文献用交叉应用实现。 首先&#xff0c;将参考文献编号&#xff1a; 然后&#xff0c;在需要引用的地方用交叉引用插入…

VM虚拟机使用的镜像文件下载

文章目录 Windows系统进入微软官网下载工具以Windows10为例下载镜像文件 Windows系统 进入微软官网下载工具 微软中国官网&#xff1a;https://www.microsoft.com/zh-cn/ 以Windows10为例下载镜像文件 选择下载的路径 开始下载 安装windows10操作系统出现Time out问题及解决办…

【AI视频】Runway:Gen-2 运镜详解

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AI视频 | Runway 文章目录 &#x1f4af;前言&#x1f4af;Camera Control&#xff08;运镜&#xff09;&#x1f4af;Camera Control功能测试Horizonta&#xff08;左右平移&#xff09;Vertical&#xff08;上下平移&#xff0…

Python 中的 Kombu 类库

Kombu 是一个用于 Python 的消息队列库&#xff0c;提供了高效、灵活的消息传递机制。它是 Celery 的核心组件之一&#xff0c;但也可以单独使用。Kombu 支持多种消息代理&#xff08;如 RabbitMQ、Redis、Amazon SQS 等&#xff09;&#xff0c;并提供了消息生产者和消费者的功…

ByteTrack多目标跟踪流程图

ByteTrack多目标跟踪流程图 点个赞吧&#xff0c;谢谢。

用 Pygame 实现一个乒乓球游戏

用 Pygame 实现一个乒乓球游戏 伸手需要一瞬间&#xff0c;牵手却要很多年&#xff0c;无论你遇见谁&#xff0c;他都是你生命该出现的人&#xff0c;绝非偶然。若无相欠&#xff0c;怎会相见。 引言 在这篇文章中&#xff0c;我将带领大家使用 Pygame 库开发一个简单的乒乓球…