uniapp上传功能用uni-file-picker实现

news2024/12/25 12:58:57

在这里插入图片描述

文章目录

  • html代码
  • 功能实现
  • css样式代码


html代码

        <uni-file-picker
          @select="onFileSelected"
          @cancel="onFilePickerCancel"
          limit="1"
          class="weightPage-upload-but"
          file-mediatype="image"
        ></uni-file-picker>
       <image
          class="weightPage-item-upload-img"
          v-if="weightData.img_url"
          :src="weightData.img_url"
          mode=""
        >
        </image>
        <image
          class="weightPage-item-upload-img"
          v-else
          src="@/static/checkDetails/upload.png"
          mode=""
        >
        </image>

用image覆盖,就能实现完全自定义上传样式的功能(也能用其他的覆盖)
上传前:在这里插入图片描述

上传后:在这里插入图片描述

功能实现

  data() {
    return {
      weightData: {
        img_url: "",
      },
    };
  },
  methods: {

    onFileSelected(e) {
      // 获取选中的文件路径
      const filePath = e.tempFiles[0].url;
      console.log(filePath);
      // 调用上传图片的方法
      this.uploadImage(filePath);
    },

    async uploadImage(filePath) {
      try {
        let formData = new FormData();
        formData.append("file", {
          url: filePath,
          name: "image.jpg",
          type: "image/jpeg",
        });

        // 转换为普通 Object
        const formDataObj = {};
        for (let [key, value] of formData.entries()) {
          formDataObj[key] = value;
        }

        /*#ifdef MP-WEIXIN*/
        // 从微信小程序的本地缓存中取出 token
        let wxToken = wx.getStorageSync("token");
        let wxbaseURL = wx.getStorageSync("baseURL");

        // 检查是否成功获取到值
        if (wxToken) {
          uni.uploadFile({
            url: `${wxbaseURL}...`, //需要传图片的后台接口
            filePath: filePath, // 上传图片 通过uni-app的uni-file-picker组件 函数返回
            name: "image", //文件名字
            header: {
              Authorization: "Bearer " + wxToken,
            },
            formData: formDataObj,
            success: (res) => {
              const { data } = JSON.parse(res.data);
              console.log(data);
              this.weightData.img_url = data.url;
              uni.showToast({
                title: "图片上传成功",
                icon: "success",
                duration: 2000, // 提示持续时间,单位为毫秒
              });
            },

            fail: (e) => {
              console.log(e);
            },
          });
        }

        /*#endif*/

        /*#ifdef H5*/
        let Token = localStorage.getItem("token");
        let baseURL = localStorage.getItem("baseURL");
        // 检查是否成功获取到值
        if (Token) {
          uni.uploadFile({
            url: `${baseURL}...`, //需要传图片的后台接口
            filePath: filePath, // 上传图片 通过uni-app的uni-file-picker组件 函数返回
            name: "image", //文件名字
            header: {
              Authorization: "Bearer " + Token,
            },
            formData: formDataObj,
            success: (res) => {
              console.log(JSON.parse(res.data));
              const { data } = JSON.parse(res.data);
              console.log(data);
              this.weightData.img_url = data.url;
              uni.showToast({
                title: "图片上传成功",
                icon: "success",
                duration: 2000, // 提示持续时间,单位为毫秒
              });
            },
            fail: (e) => {
              console.log(e);
            },
          });
        }
        /*#endif*/
        // 可以添加上传进度监听等额外逻辑
      } catch (error) {
        console.error("上传图片时发生错误", error);
      }
    },

    onFilePickerCancel() {
      console.log("取消选择");
      // 可以在这里处理取消选择的逻辑
    },
  },

css样式代码

隐藏样式的重点是 opacity: 0;

    .weightPage-upload-but {
      position: absolute;
      width: 279px;
      height: 100px;
      z-index: 1;
      left: 0px;
      opacity: 0;
      padding: 10px;
    }

    .weightPage-item-upload-img {
      width: 80px;
      height: 78px;
      border-radius: 10px;
    }

    .weightPage-item-upload-text {
      font-size: 12px;
      font-weight: 500;
      line-height: 19px;
      color: rgba(153, 153, 153, 1);
      flex: 1;
      padding: 10px;
    }

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1937024.html

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

相关文章

Java记事本工具Notepad++

常见的高级记事本 Editplus、Notepad、Sublime Notepad软件的安装和使用 安装&#xff1a;傻瓜式安装 1、选择中文-->【OK】 2、点击【下一步】 3、协议点击【我接受】 4、选择安装路径-->【下一步】 5、点击【下一步】 6、最后点击【安装】 7、将运行取消-->点击…

机械学习—零基础学习日志(高数06——函数特性)

零基础为了学人工智能&#xff0c;真的开始复习高数 函数的性质&#xff0c;开始新的学习&#xff01; 有界性&#xff1a; 解法放这里&#xff1a; 证明有界&#xff0c;其实内部的包含知识点很多。第一&#xff0c;如果有界&#xff0c;你需要证明函数在一定区间内&#xff…

【体外诊断】ARM/X86+FPGA嵌入式计算机在免疫分析设备中的应用

体外诊断 信迈提供基于Intel平台、AMD平台、NXP平台的核心板、2.5寸主板、Mini-ITX主板、4寸主板、PICO-ITX主板&#xff0c;以及嵌入式准系统等计算机硬件。产品支持GAHDMI等独立双显&#xff0c;提供丰富串口、USB、GPIO、PCIe扩展接口等I/O接口&#xff0c;扩展性强&#xf…

pytorch学习(九)激活函数

1.pytorch常用激活函数如下&#xff1a; #ReLU激活函数 #Leaky ReLU激活函数 #Sigmoid激活函数 #Tanh激活函数 #Softmax激活函数 #Softplus2.代码 import torch.nn as nn import torch import numpy from torch.utils.tensorboard import SummaryWriterwriter SummaryWriter…

buu做题(5)

目录 [GXYCTF2019]禁止套娃 方法一: 方法二: [NCTF2019]Fake XML cookbook [GXYCTF2019]禁止套娃 页面里啥也没有 使用dirsearch 扫一下目录 发现有 git 使用工具githack拉取源码 <?php include "flag.php"; echo "flag在哪里呢&#xff1f;<br&g…

空间计算开发:Volu的集成开发工具包

在空间计算技术迅速发展的今天,VR和AR项目的开发需求日益增长。Volu,一个面向空间计算赛道的开发者工具,正致力于简化这一过程。本文将深入探讨Volu如何通过其集成环境,为开发者提供一站式的解决方案。 一、定位:空间计算的得力助手 Volu定位为一个专为空间开发设计的集…

亚马逊自养号测评系统:电商卖家的销量加速器

搭建一套属于自己的测评系统&#xff0c;以实现批量优质账号的养成和自主掌控真实买家行为&#xff0c;对于电商卖家来说&#xff0c;无疑是一个极具吸引力和竞争力的选择。以下是对您提出的实现价值点的详细解析&#xff1a; 实现价值详细解析 1.全面掌控与灵活应对&#xf…

Chromium CI/CD 之Jenkins实用指南2024-添加Windows节点(八)

1. 引言 在现代软件开发流程中&#xff0c;持续集成&#xff08;CI&#xff09;和持续交付&#xff08;CD&#xff09;已成为确保代码质量和加速发布周期的关键实践。Jenkins作为一款广泛应用的开源自动化服务器&#xff0c;通过其强大的插件生态系统和灵活的配置选项&#xf…

Qt中的高分辨率及缩放处理

写在前面 使用Qt开发界面客户端&#xff0c;需要考虑不同分辨率及缩放对UI界面的影响&#xff0c;否则会影响整体的交互使用。 问题 高分辨率/缩放设备上图片/图标模糊 若不考虑高分辨及缩放处理&#xff0c;在高分辨率/缩放设备上&#xff0c;软件中的图片、图标可能会出现…

rimraf快速删除node_modules方法

项目中&#xff0c;有时候会遇到下载依赖报错&#xff0c;然后想要删除node_modules再重新下载&#xff0c;但是有时候直接用yarn 或者npm install仍热不行&#xff0c;我们可以尽量用yran&#xff0c;因为npm 可能会自动下一些给一些包升级了&#xff0c;此时因为前面已经下过…

【D3.js in Action 3 精译_020】2.6 用 D3 设置与修改元素样式 + 名人专访(Nadieh Bremer)+ 2.7 本章小结

当前内容所在位置 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可视化最佳实践&#xff08;下&#xff09;1.4 本章小结 第二章…

Linux云计算 |【第一阶段】ENGINEER-DAY4

主要内容&#xff1a; 配置Linux网络参数、配置静态主机名、查看/修改/激活/禁用网络连接、指定DNS、虚拟网络连接、虚拟机克隆、SSH客户端、SCP远程复制、SSH无密码验证&#xff08;SERVICE-DAY5&#xff09;、虚拟网络类型 一、网络参数配置 修改网卡配置文件主要是需要配置…

Spring Authorization Server 自定义 OAuth2 密码模式返回数据结构优化

前言 对接了自定义密码模式&#xff0c;但是返回的数据结构不符合要求 我们需要改成下面格式 开始 我假设你已经对接好了自定义密码功能&#xff0c;不会的话看下面文章 Spring Authorization Server 1.1 扩展实现 OAuth2 密码模式与 Spring Cloud 的整合实战&#xff08;上…

23种设计模式之命令模式

命令模式 1、定义 命令模式&#xff1a;将一个请求封装为一个对象&#xff0c;从而可用不同的请求对客户进行参数化&#xff0c;对请求排队或者记录请求日志&#xff0c;以及支持可撤销的操作 2、命令模式结构 Command&#xff08;抽象命令类&#xff09;&#xff1a;一般是…

【入门】基于DE2-115的My First FPGA 工程

1.1. 概述 这是一个简单的练习&#xff0c; 可以帮助初学者开始了解如何使用Intel Quartus 软件进行 FPGA 开发。 在本章节中&#xff0c;您将学习如何编译 Verilog 代码&#xff0c;进行引脚分配&#xff0c;创建时序约束&#xff0c;然后对 FPGA 进行编程&#xff0c;驱动开…

NVIDIA 完全过渡到开源 GPU 内核模块

目录 支持的 GPU安装程序更改将包管理器与 CUDA 元包配合使用使用 runfile使用安装帮助程序脚本包管理器详细信息apt&#xff1a;基于 Ubuntu 和 Debian 的发行版dnf&#xff1a;Red Hat Enterprise Linux、Fedora、Kylin、Amazon Linux 或 Rocky Linuxzypper&#xff1a;SUSE …

​探讨元宇宙和VR虚拟现实之间的区别​

在数字时代&#xff0c;人们对虚拟现实的兴趣与日俱增。在虚拟现实技术的推动下&#xff0c;出现了两个概念&#xff1a;元宇宙和VR虚拟现实。虽然这两个概念都与虚拟现实有关&#xff0c;但它们有着不同的特点和用途。在本文中&#xff0c;我们将探讨元宇宙和VR虚拟现实之间的…

UNiapp 微信小程序渐变不生效

开始用的一直是这个&#xff0c;调试一直没问题&#xff0c;但是重新启动就没生效&#xff0c;经查询这个不适合小程序使用&#xff1a;不适合没生效 background-image:linear-gradient(to right, #33f38d8a,#6dd5ed00); 正确使用下面这个&#xff1a; 生效&#xff0c;适合…

JavaScript与DOM的奇妙探险:从入门到精通的实战笔记

文章目录 JavaScript基本说明特点两种使用方式在script中写使用script标签引入JS文件 数据类型介绍特殊值 运算符算数运算符赋值运算符逻辑运算符&#xff1a;![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/bbf5c150699845af837d3c45c926e941.png)条件运算符 数组的…

通信协议_C#实现CAN通信

CAN协议 CAN&#xff08;Controller Area Network&#xff09;即控制器局域网络。特点&#xff1a; 多主网络&#xff1a;网络上的任何节点都可以主动发送数据&#xff0c;不需要一个固定的主节点。双绞线&#xff1a;使用双绞线作为通信介质&#xff0c;支持较远的通信距离。…