【vue/uniapp】使用 uni.chooseImage 和 uni.uploadFile 实现图片上传(包含样式,可以解决手机上无法上传的问题)

引入:
之前写过一篇关于 uview 1.x 版本上传照片 的文章,但是发现如果是在微信小程序的项目中嵌入 h5 的模块,这个 h5 的项目使用 u-upload 的话,图片上传功能在电脑上正常,但是在手机的小程序上测试就不会生效,点击上传加号按钮毫无反应。
解决方法:
现在最终的解决方法是,使用 uniapp 的 uni.chooseImage 来选择照片,使用 uni.uploadFile 来上传图片,其他所有的样式和逻辑都自己来实现,最终的效果长这样:

代码与解析:
单独写一个组件,先实现样式:

<template><view class="meeting-image"><view class="title"><text></text><!-- 展示图片张数 --><text style="color: #a1a1a1;">({{ list.length }}/9)</text></view><view class="img_wrap flex-row flex-justify-between"><view class="img_box" v-for="(item, index) in list" :key="index"><!-- 展示上传之后的图片 --><image :src="item.imgUrl" class="pic" mode="aspectFill" @click="previewImage(index)" /><!-- 删除图标 --><!-- 这里的删除图标叉叉是用的在线网址,$public 是挂载在原型上的,可以自定义 --><image :src="`${$public()}/project-meeting/icon_20_close.png`" class="close"@click.stop="handleDeleteImg(index, item)" /></view><!-- 上传的方框 --><view class="upload-box" @click="chooseImg" v-if="list.length !== 9 && isSponsorUserFlag == 1"></view></view><u-toast ref="uToast" /></view>
</template>
.meeting-image {.title {font-size: 32rpx;line-height: 40 rpx;text:nth-of-type(1) {color: #ff3f30;padding-right: 4rpx;}text:nth-of-type(3) {padding-left: 12rpx;color: #cccccc;}}.img_wrap {flex-wrap: wrap;&::after {width: calc((100% - 40rpx) / 3);display: block;content: '';}.img_box {margin-top: 20rpx;position: relative;width: calc((100% - 40rpx) / 3);height: 220rpx;.pic {width: 100%;height: 100%;object-fit: cover;border-radius: 14rpx;}.close {position: absolute;top: -8rpx;right: -8rpx;width: 40rpx;height: 40rpx;}}.upload-box {position: relative;width: calc((100% - 40rpx) / 3);height: 220rpx;border: 1px solid #e5e5e5;box-sizing: border-box;position: relative;border-radius: 14rpx;margin-top: 20rpx;&::after {display: block;content: '';width: 1px;height: 96rpx;background-color: #e5e5e5;position: absolute;left: 105rpx;top: 50rpx;}&::before {display: block;content: '';width: 96rpx;height: 1px;background-color: #e5e5e5;position: absolute;right: 60rpx;top: 100rpx;}}}
}

js 逻辑部分,我这里后端提供的 api 有上传(查询文件地址),即代码中的 previewUrl ,删除的实现方法是在本地进行的,是对数组进行 splice 之后,再将最新的图片数组保存进大数组一次,最后再进行上传,注释写的很详细,方便以后回顾查看。

简单解释:

chooseImg 是最先执行的函数,即点击上传按钮时执行,进来判断是不是数量超过了 9 张,没超过就往下走;
使用 uni.chooseImage 进行图片选择功能,配置相应参数和值,选择成功,走到 then 的成功回调里,回显照片,此时调接口 previewUrl 来上传获取图片id;
然后将图片保存进数组中

<script>
import { BASE_URL } from '@/pages/workTable/utils/constant'
import { previewUrl } from '@/pages/workTable/utils/api.js'export default {name: 'meeting-image',// 接收参数props: {fileList: {type: Array,default: []},// 用于该页面有很多项,而每一项都需要传一组图片的页面subItem: {},// 用于只传一组图片的页面picListArr: {},picList: {}},data() {return {list: [],count: 9,}},computed: {},methods: {// 预览功能暂时有问题previewImage(index) {console.log('预览', this.list.map(el => el.imgUrl));uni.previewImage({current: index,urls: this.list.map(el => el.imgUrl)})},// 点击上传按钮触发chooseImg() {// 如果大于 9 张就不触发底下的 uni.chooseImageif (this.count == 0) {this.$refs.uToast.show({title: '最多能上传9张照片',duration: 2000})return}uni.chooseImage({// 最多可以选择的图片张数,默认9count: this.count,// original 原图,compressed 压缩图,默认二者都有sizeType: ['original', 'compressed'],// album 从相册选图,camera 使用相机,默认二者都有sourceType: ['album', 'camera'],success: res => {// console.log('res',res);uni.showLoading({title: '上传中'})Promise.all(res.tempFilePaths.map(item => {return this.uploadFile({filePath: item})})).then(re => {uni.hideLoading()// let fileList = []re.map((el, index) => {let data = JSON.parse(el.data)// 用于上传成功后照片回显// console.log('data',data.data);previewUrl(data.data).then(res => {console.log('我要预览图片', res); this.list.push({ fileUrl: data.data, imgUrl: res.data })setTimeout(() => {console.log('this.list', this.list);this.saveFile(this.list)}, 800)})})}).catch(err => {console.log('err', err);this.$refs.uToast.show({title: '上传失败',duration: 2000})uni.hideLoading()})},fail: () => { }})},// 上传图片uploadFile({ filePath }) {return new Promise((resolve, reject) => {uni.uploadFile({url: `${BASE_URL}/mobilemanage/api/common/upload?typeEnum=IMAGE`,filePath: filePath,name: 'file',header: {'site3-f-ue': uni.getStorageSync('site3-f-ue')},formData: {typeEnum: "IMAGE",},success: res => {console.log('调用上传接口的结果', res);resolve(res)},fail: error => {reject(error)}})})},// 将图片保存进数组saveFile(list) {console.log('aaaaaaaaaa', list);// 子组件拿接到的父组件传过来的值,subItem 是每一项的数据,里面有 picList 和 picListArrconsole.log('父组件传过来的subItem', this.subItem);// 每一项都需要上传照片这种情况才需要用到 subItemif (this.subItem) {console.log('有 subItem 的情况');let subItem = this.subItemsubItem.picList = []subItem.picListArr = []list.map(async item => {console.log('bbbbbbbb', item);subItem.picList.push({fileUrl: item.fileUrl})console.log('subItem.picList', subItem.picList);})console.log('subItem.picList', subItem.picList);subItem.picList.map(item => {subItem.picListArr.push(item.fileUrl)})console.log('subItem.picListArr', subItem.picListArr);} else {console.log('没有subItem的情况', list);// 只需要上传一组图片let picList = this.picListlet picListArr = this.picListArrpicList = []picListArr = []// console.log('list',list);list.map(async item => {console.log('qqqqqqqqqqqq', item);picList.push({fileUrl: item.fileUrl})})this.$emit('getPicList', picList)console.log('照片列表', picList);}},// 删除图片handleDeleteImg(index, item) {this.list.splice(index, 1)this.saveFile(this.list)this.$refs.uToast.show({title: '删除成功',duration: 2000})}},watch: {// 监视当前图片数组长度,增减张数显示fileList: {handler: function (value) {this.list = valuethis.count = 9 - this.list.length},deep: true,immediate: true}}
}
</script>

使用的时候,父组件进行调用传值:

import uploadImage from '../components/upload-image'
components: {uploadImage
},
<upload-image :fileList="subItem.picList" :subItem="subItem" :projectMeetingId="1":isSponsorUserFlag="1"
></upload-image>

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

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

相关文章

漏洞复现--海康威视IP网络对讲广播系统远程命令执行

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…

职场革命:六款AI助手改写工作效率的故事

引言 在数字化时代&#xff0c;AI助手正快速成为职场的革命者。这些智能助手不仅仅是效率的提升者&#xff0c;它们更是创新的驱动力&#xff0c;重新定义了我们的工作方式。从自动化PPT创建到智能邮件优化&#xff0c;它们的影响深远且多元。本文将深入探讨六款不同领域的AI助…

三维模型数据的几何坐标变换的点云重建并行计算技术方法分析

三维模型数据的几何坐标变换的点云重建并行计算技术方法分析 倾斜摄影三维模型数据的几何坐标变换与点云重建并行计算技术的探讨主要涉及以下几个方面&#xff1a; 1、坐标系定义与转换&#xff1a;在进行坐标变换前&#xff0c;需要确定各个参考系的定义并实现坐标系之间的转…

卷积神经网络|制作自己的Dataset

在编写代码训练神经网络之前&#xff0c;导入数据是必不可少的。PyTorch提供了许多预加载的数据集&#xff08;如FashionMNIST&#xff09;&#xff0c;这些数据集 子类并实现特定于特定数据的函数。 它们可用于对模型进行原型设计和基准测试&#xff0c;加载这些数据集是十分…

任务悬赏源码活动营销三级分销返佣积分商城版

分销功能:用户拉新用户做任务可以获取任务返佣,三级分销逻辑。 用户拉新会员可以获取一定比例的返佣,根据会员的等级不同获取返佣的比例不同。 会员功能:会员可以根据不同的等级设置任务返佣比例, 以及提现手续费和发布任务置顶次数的赠送问题。会员做任务的价格与普通…

阿里云服务器8080端口安全组开通图文教程

阿里云服务器8080端口开放在安全组中放行&#xff0c;Tomcat默认使用8080端口&#xff0c;8080端口也用于www代理服务&#xff0c;阿腾云atengyun.com以8080端口为例来详细说下阿里云服务器8080端口开启教程教程&#xff1a; 阿里云服务器8080端口开启教程 阿里云服务器8080端…

SkyWalking 快速入门

SkyWalking 是一个基于 Java 开发的分布式系统的应用程序性能监视工具&#xff0c;专为微服务、云原生架构和基于容器&#xff08;Docker、K8s、Mesos&#xff09;架构而设计。 一、SkyWalking 简介 SkyWalking 是观察性分析平台和应用性能管理系统。 提供分布式追踪、服务网格…

输入输出流

1.输入输出流 输入/输出流类&#xff1a;iostream---------i input&#xff08;输入&#xff09; o output&#xff08;输出&#xff09; stream&#xff1a;流 iostream&#xff1a; istream类&#xff1a;输入流类-------------cin&#xff1a;输入流类的对象 ostream类…

使用Tensorboard可视化网络结构(基于pytorch)

前言 我们在搭建网络模型的时候&#xff0c;通常希望可以对自己搭建好的网络模型有一个比较好的直观感受&#xff0c;从而更好地了解网络模型的结构&#xff0c;Tensorboard工具的使用就给我们提供了方便的途径 Tensorboard概况 Tensorboard是由Google公司开源的一款可视化工…

【大模型+编程助手】国内编程助手安装与使用(CodeGeeX,Baidu Comate)

百度 Comate (可试用)&#xff1a;https://comate.baidu.com/ 清华CodeGeeX &#xff08;开源&#xff0c;暂时免费&#xff09;&#xff1a;https://codegeex.cn/ 华为&#xff1a;https://devcloud.cn-north-4.huaweicloud.com/codeartside/home?productsnap# 开发平台VScod…

贪吃蛇C语言实现(有源码)

前言 之前学了一点easyx图形库的使用&#xff0c;掌握一些基本用法后就用贪吃蛇来进行实战了&#xff0c;运行视频放在csdn视频那一栏了&#xff0c;之前的烟花也是。 1.头文件 #define _CRT_SECURE_NO_WARNINGS 1 #include<easyx.h> #include<conio.h> #includ…

【Vue2+3入门到实战】(21)认识Vue3、使用create-vue搭建Vue3项目、熟悉项目和关键文件

目录 一、认识Vue31. Vue2 选项式 API vs Vue3 组合式API2. Vue3的优势 二、 使用create-vue搭建Vue3项目1. 认识create-vue2. 使用create-vue创建项目 三、 熟悉项目和关键文件四、总结 一、认识Vue3 1. Vue2 选项式 API vs Vue3 组合式API <script> export default {…

力扣题:高精度运算-1.2

力扣题-1.2 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;415. 字符串相加 解题思想&#xff1a;从后往前遍历两个字符串,然后进行相加即可 class Solution(object):def addStrings(self, num1, num2):""":type num1: str:type …

Liunx Top命令

Top 是 Linux 下常用的性能分析工具&#xff0c;能够实时动态显示当前系统负载情况、内存使用情况&#xff0c;以及各个进程资源占用情况。 通过 top 命令显示系统整体情况。示例如下&#xff1a; top - 17:51:14 up 69 days, 20:06, 2 users, load average: 71.81, 71.99,…

2024年网络安全合规建设的发展预测

文章目录 前言一、网络安全合规运营工作迎来巨大变革的原因二、网络安全合规运营发展变化的预测预测一 :网络安全合规运营会成为企业业务发展的驱动因素预测二 :企业对网络安全合规运营的投入将继续增加预测三 : 第三方供应商和服务提供商需要为企业分担更多的网络安全风险预…

Navicat 技术干货 | 如何查看关系型数据库(MySQL、PostgreSQL、SQL Server、 Oracle)查询的运行时间

在数据库优化中&#xff0c;理解和监控查询运行时间是至关重要的。无论你是数据库管理员、开发人员或是参与性能调优的人员&#xff0c;知道如何查看查询运行时间能为你的数据库操作提供有价值的参考。本文中&#xff0c;我们将探索几款热门的关系数据库&#xff08;如 MySQL、…

ubuntu下快速安装使用docker

一、ubuntu下安装docker 1、命令行终端内直接输入docker 可以看到安装docker的命令提示 2、安装需要注意的几个点 (1)需要管理员权限 (2)更新软件源后再进行安装 命令行输入命令 sudo apt-get update #更新软件源 sudo apt install docker.io #安装docker 如图所示 二…

PostgreSQL荣获DB-Engines 2023年度数据库

数据库流行度排名网站 DB-Engines 2024 年 1 月 2 日发布文章宣称&#xff0c;PostgreSQL 荣获 2023 年度数据库管理系统称号。 PostgreSQL 在过去一年中获得了比其他 417 个产品更多的流行度增长&#xff0c;因此获得了 2023 年度 DBMS。 DB-Engines 通过计算每种数据库 2024 …

性能优化-OpenMP基础教程(一)

本文主要介绍OpenMP并行编程技术&#xff0c;编程模型、指令和函数的介绍、以及OpenMP实战的几个例子。希望给OpenMP并行编程者提供指导。 &#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;高性能&#xff08;HPC&am…

Mysql count统计去重的数据

不去重&#xff0c;是4 &#xff1a; SELECT COUNT(NAME) FROM test2 明显里面包含了2个 name 等于 mike的数据&#xff0c; 所以需要做去重 &#xff1a; 通过结合 count 函数和 DISTINCT 关键字 SELECT COUNT(DISTINCT NAME) FROM test2 好了就到这。