uniapp使用uview2上传图片功能

news/2024/9/21 16:33:19 标签: uni-app, 前端

 

官网地址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.niftyadmin.cn/n/5669069.html

相关文章

锐尔15注册机 锐尔文档扫描影像处理系统15功能介绍

锐尔文档扫描影像处理系统是一款全中文操作界面的文件、档案扫描及影像优化处理软件&#xff0c;是目前国内档案数字化行业里专业且优秀的影像优化处理软件。 无论是从纸质文件制作高质量的影像文件&#xff0c;或是检查已经制作好的影像文件&#xff0c;锐尔文档扫描影像处理…

2024 “华为杯” 中国研究生数学建模竞赛(D题)深度剖析|大数据驱动的地理综合问题|数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题&#xff01; CS团队倾注了大量时间和心血&#xff0c;深入挖掘解…

英语<数词>

1.基数 one two three 整数 1 2 3 小数 1.1 2.2 3.2 分数 分子用基数&#xff0c;分母用序数 例子 1/3 one third 分子>1 2/3 two thirds 百分数 2.序数 first second

LeetCode118:杨辉三角

题目链接&#xff1a;118. 杨辉三角 - 力扣&#xff08;LeetCode&#xff09; 代码如下 class Solution {public:vector<vector<int>> generate(int numRows) {vector<vector<int>> dp(numRows);vector<int> temp(numRows);for (int i 0; i &…

如何设置 Django 错误邮件通知 ?

Django 是一个强大的 web 框架&#xff0c;非常适合那些想要完美快速完成任务的人。它有许多内置的工具和特性&#xff0c;一个有用的特性是 Django 可以在出现错误时发送电子邮件提醒。这对开发人员和管理员非常有用&#xff0c;因为如果出现问题&#xff0c;他们会立即得到通…

【C#生态园】虚拟现实与增强现实:C#开发库全面评估

C#编程与虚拟现实&#xff1a;六大库全面解析 前言 随着虚拟现实&#xff08;VR&#xff09;和增强现实&#xff08;AR&#xff09;技术的不断发展&#xff0c;C#编程语言在这一领域的应用也愈发广泛。本文将探讨几种用于C#开发的虚拟现实和增强现实库&#xff0c;以及它们的…

C#-日志系统

文章速览 Log 全局变量创建实例 坚持记录实属不易&#xff0c;希望友善多金的码友能够随手点一个赞。 共同创建氛围更加良好的开发者社区&#xff01; 谢谢~ Log 全局变量 /// <summary>/// 日志系统/// </summary>public ILogger Log { get; private set; }创建实…

24.9.20学习笔记

隐藏状态和细胞状态是循环神经网络&#xff08;RNN&#xff09;及其变种&#xff0c;如长短期记忆网络&#xff08;LSTM&#xff09;中的概念&#xff0c;它们在处理序列数据时扮演着重要的角色。尽管它们都与网络的记忆能力相关&#xff0c;但它们之间存在一些关键的区别&…