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

uniapp使用uview2上传图片功能

 

官网地址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.kler.cn/a/312816.html

相关文章:

  • WordPress 2024主题实例镜像
  • Spring框架之适配器模式 (Adapter Pattern)
  • Mysql数据类型面试题15连问
  • Linux——gcc编译过程详解与ACM时间和进度条的制作
  • 009_SSH_Mysql图书管理系统(学生注册 借书 还书 绵阳)——lwplus87(免费送)
  • 【ARM Coresight OpenOCD 系列 5 -- arp_examine 使用介绍】
  • 通威股份半年报业绩巨降:销售费用大增,近一年股价跌四成
  • 算法-分治和逆序
  • 操作系统笔记三
  • Jboss 低版本JMX Console未授权
  • 828华为云征文|华为Flexus云服务器打造FastBee物联网平台
  • Linux Inode 概念、查看、引发的问题及常见解决方案
  • Unity多语言插件I2 Localization国际化应用
  • JAIN SLEE 中Container Managed Persistent (CMP)
  • 使用 Spring Boot + Redis + Vue 实现动态路由加载页面
  • centos 安装VNC,实现远程连接
  • Unity3d开发的C#编码规范
  • 【自然语言处理】补充:布尔模型
  • VMware Fusion虚拟机Mac版 安装Win10系统教程
  • 如何在Windows上安装Docker
  • centos 7.9安装k8s
  • SpringBoot开发-数据加密
  • 鸿蒙开发(NEXT/API 12)【同步读写流】远场通信服务
  • Kafka3.8.0+Centos7.9的安装参考
  • 如何确保Java程序分发后不被篡改?使用JNI对Java程序进行安全校验
  • Linux C# DAY3