uniapp--点击上传图片到oss再保存数据给后端接口

项目采用uniapp与uview2.0组件库

--1.0的也可以参考一下,大差不差

一、项目要求与样式图

点击上传n张图片到oss,然后点击提交给后端

二、思路

1、打开上传按钮,弹出框内出现上传图片和提交按钮

2、点击上传图片区域,打开本地图片或者调用相机。上传到oss拿到返回的图片url和本地的url地址。可以进行预览删除。再点击提交,将选取好的图片地址发送给后端就ok了

一点特别注意,上传接口的方法一定要是POST,问就是小程序规定

三、代码区域

<view><u-upload :fileList="fileList1" multiple @afterRead="afterRead1" @delete="deletePic1" name="1" :maxCount="3" width="175" height="175" ></u-upload>//相关参数与公式去看view2的官方文档我就不一一简绍了<view><button class="Upstatebtn" type="default" @click="UpdateStatus">提交</button></view>
</view>//data参数
//fileList1: [], //上传图片接受数组
//img1: [], //当前图片数组
因为使用方便,就直接复制的官网案例

关键代码在添加图片后上传的两个数组处理和本地地址还有在线图片地址

            /*** @func 删除图片* */deletePic1(event) {this[`fileList${event.name}`].splice(event.index, 1)var arry = []this.fileList1.filter((v, i) => {arry.push(v.url)})this.img1 = arryconsole.log(this.img1, "1");},/*** @func 新增图片上传  读取后的处理函数* */async afterRead1(event) {// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式let lists = [].concat(event.file)console.log('list',lists);let fileListLen = this[`fileList${event.name}`].lengthlists.map((item) => {this[`fileList${event.name}`].push({...item,status: 'uploading',message: '上传中'})})for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise1(lists[i].url)console.log('result是',result);let item = this[`fileList${event.name}`][fileListLen]this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {status: 'success',message: '',url: result[0]}))fileListLen++}var arry = []this.fileList1.filter((v, i) => {console.log('每一个v是什么',v);arry.push(v.url)})this.img1 = arryconsole.log(this.img1, "1");},/*** @func 上传图片到oss,只提供files,后端完成上传* */uploadFilePromise1(url) {return new Promise((resolve, reject) => {let a = uni.uploadFile({url: '',//后端接口地址,后端解决了oss相关密钥获取filePath: url,name: 'files',success: (res) => {console.log(res.data);
//这里使用JSON.parse是数据返回的问题需要进行转换,官网是不需要进行转换的,未了配合提交接口上传一个oss返回的图片列表数据console.log(JSON.parse(res.data));setTimeout(() => {resolve(JSON.parse(res.data).data) //服务器返回图片带域名//服务器返回图片不带域名需要自己拼接域名 否则预览图片无法实现// resolve('服务器域名' + JSON.parse(res.data).data)}, 1000)}});})},/*** @func 上传图片地址给后台端修改状态* */UpdateStatus() {let params = {id: this.Upid,fileList: this.img1}if (this.img1.length > 0) {//后端需要的数据格式,因为我自己循环时候做了调整不要要这个方法了。//后端要什么格式数据自己商定// params.fileList = this.img1.reduce((arr, cur) => arr.concat((cur), []))GetBudgetUpdate(params).then(res => {if (res == true) {//上传成功后清空params数据,关闭弹框,刷新列表,提示成功this.img1 = []this.taskList = []this.page = 1this.getBudgetList()this.showUp = falseuni.showToast({title: `上传成功`,icon: 'none',duration: 2000,})}})} else {uni.showToast({title: `至少需要上传一张交付物图片`,icon: 'none',duration: 2000})}},/*** @func 上传图片取消,弹框关闭* */closePup(){this.showUp=falsethis.img1=[]this.fileList1=[]this.Upid=''},

四、遇到的问题和处理

第一次使用时候遇到一个问题是点击预览图片失败了,因为我点击图片传递调用uview组件源码方法所传递的值类型不一样    url: result[0]

这一行代码卡了我这个菜鸡2天,我一直认为数据格式没问题,直接修改了下方的源码判断,,本来是url: result。直接添加了数组里的数组,然后传值给后端img1数组时候

// params.fileList = this.img1.reduce((arr, cur) => arr.concat((cur), []))

const a = [ ["1"],["2"],["3"],["4"] ]
//变成
const b =["1","2","3","4"]const b = a .reduce((arr, cur) => arr.concat((cur), []));

嵌套数组合并回去了


 

for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise1(lists[i].url)console.log('result是',result);let item = this[`fileList${event.name}`][fileListLen]this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {status: 'success',message: '',url: result[0]}))fileListLen++}

 uni.PreviewImage方法需要的是这样的数据格式,拿里面的url地址或者thumb地址

		// 预览图片onPreviewImage(item) {if (!item.isImage || !this.previewFullImage) returnuni.previewImage({// 先filter找出为图片的item,再返回filter结果中的图片urlurls: this.lists.filter((item) => this.accept === 'image' || uni.$u.test.image(item.url || item.thumb)).map((item) => item.url || item.thumb),current: item.url || item.thumb,// urls: this.lists.filter((item) => this.accept === 'image' || uni.$u.test.image(item.thumb || item.url)).map((item) => item.thumb || item.url),current: item.thumb || item.url,fail() {uni.$u.toast('预览图片失败')},});},

五--感谢  小李小李,知书达理的思路与写法

借鉴的这个文章

uniapp利用uview2.0中的uploadFile组件实现多张图片的增删预览上传功能-CSDN博客

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

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

相关文章

一、【Photoshop如何根据不同类型图像抠图】

文章目录 前言图形结构1、规则图形2、不规则图形 图形颜色1、轮廓清晰2、颜色分明 前言 当我们有抠图需求的时候&#xff0c;不要一开始就想着我怎么去把它抠出来&#xff0c;首先应该分析图形的特点&#xff0c;然后再去选取合适的工具&#xff0c;这样才可以做到事半功倍&am…

OpenWRT软路由web界面如何远程访问?

文章目录 1.openWRT安装cpolar2.配置远程访问地址3.固定公网地址 简单几步实现在公网环境下远程访问openWRT web 管理界面&#xff0c;使用cpolar内网穿透创建安全隧道映射openWRT web 界面面板443端口&#xff0c;无需公网IP&#xff0c;无需设置路由器。 1.openWRT安装cpola…

JSX基础语法

文章目录 认识JSX语法JSX是什么为什么Rect选择了JSXJSX书写规范JSX注释编写 JSX的基本使用JSX的事件绑定this绑定问题参数传递问题 JSX的条件渲染常见的条件渲染方式 JSX的列表渲染JSX的原理和本质JSX的本质虚拟DOM的创建过程 案例练习 认识JSX语法 // 1. 定义根组件 const el…

RK3568-适配at24c04模块

将at24c04模块连接到开发板i2c2总线上 i2ctool查看i2c2总线上都有哪些设备 UU表示设备地址的从设备被驱动占用,卸载对应的驱动后,UU就会变成从设备地址。at24c04模块设备地址 0x50和0x51是at24c04模块i2c芯片的设备地址。这个从芯片手册上也可以得知。A0 A1 A2表示的是模块对…

基于元模型优化算法的主从博弈多虚拟电厂动态定价和能量管理(matlab代码)

目录 1 主要内容 主从博弈模型 基于元模型的均衡算法流程图 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序复现《基于元模型优化算法的主从博弈多虚拟电厂动态定价和能量管理》模型&#xff0c;建立运营商和多虚拟电厂的一主多从博弈模型&#xff0c;研究运营商动态…

如何租用香港写字楼,需要注意哪些事项

1. 确定您的所需 你需要多少空间 在一切开始之前&#xff0c;您需要确切地知道您的业务(即您、您现有的员工和预计的招聘、您的访客或客户以及您想要的设施如食品储藏室、接待处、服务器机房甚至健身房&#xff0c;婴儿护理室等)&#xff0c;以实用面积计算需要多少空间。空间…

线性代数1:线性方程和系统

Digital Collection (staedelmuseum.de) 图片来自施泰德博物馆 一、前言 通过这些文章&#xff0c;我希望巩固我对这些基本概念的理解&#xff0c;同时如果可能的话&#xff0c;通过我希望成为一种基于直觉的数学学习方法为其他人提供额外的清晰度。如果有任何错误或机会需要我…

出差学小白知识No5:|Ubuntu上关联GitLab账号并下载项目(ssh key配置)

1 注冊自己的gitlab账户 有手就行 2 ubuntu安装git &#xff0c;并查看版本 sudo apt-get install git git --version 3 vim ~/.ssh/config Host gitlab.example.com User your_username Port 22 IdentityFile ~/.ssh/id_rsa PreferredAuthentications publickey 替换gitl…

C++多态的认识与理解

多态的概念 通俗来说&#xff0c;多态就是多种形态。具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会产生出不同的状态。 比方说买高铁票时&#xff0c;如果你是学生的话&#xff0c;买票就有优惠。如果你是军人的话&#xff0c;就可以优先买票。普通人的话&…

一文了解和使用nginx(附带图文)

前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 一文了解和使用nginx 一. nginx 简介1.1 什么是 nginx 和可以做什么事情1.2 正向代理1.3 反向代理1.4 负载均衡1.5 SSL 配置1.6 管理…

苹果官宣新品发布会 10月31日发布会与Mac有关

10 月 25 日消息&#xff0c;苹果宣布将于北京时间 10 月 31 日上午 8 点举行主题为“来势迅猛”的线上特别活动&#xff0c;届时或将有新品发布。 这场发布会与以往不同&#xff0c;将在北京时间 10 月 31 日上午 8 点举行。有很多猜测认为苹果届时会发布新款 Mac 电脑&#x…

Jenkins+Ant+Jmeter接口自动化集成测试

一、Jenkins安装配置 1、安装配置JDK1.6环境变量&#xff1b; 2、下载jenkins.war&#xff0c;放入C:\jenkins目录下&#xff0c;目录位置随意&#xff1b; Jenkins启动方法&#xff1a; cmd进入Jenkins目录下&#xff0c;执行java -jar jenkins.war 浏览器输入&#xff1a;l…

JavaSE 二叉树

目录 1 树型结构1.1 概念1.2 树的表示形式1.3 树的应用 2 二叉树2.1 概念2.2 二叉树的基本形态2.3 两种特殊的二叉树2.4 二叉树的性质2.5 二叉树的存储2.6 二叉树的基本操作2.6.1 二叉树的遍历2.6.2 二叉树的基本操作 2.7 基础练习题2.7.1 二叉树的前序遍历2.7.2 二叉树中序遍历…

TensorFlow2从磁盘读取图片数据集的示例(tf.data.Dataset.list_files)

import os import warnings warnings.filterwarnings("ignore") import tensorflow as tf from tensorflow.keras.optimizers import Adam from tensorflow.keras.applications.resnet import ResNet50 from pathlib import Path import numpy as np#数据所在文件夹 …

Unity C#中LuaTable、LuaArrayTable、LuaDictTable中数据的增删改查

LuaTable、LuaArrayTable、LuaDictTable中数据的增删改查 介绍Lua表lua表初始化lua移除引用lua中向表中添加数据lua中表中移除数据lua表中连接数据lua表中数据排序获取lua表长度获取表中最大值 UnityC#中LuaTableUnityC#中LuaArrayTable、LuaDictTable、LuaDictTable<K,V>…

Java游戏修炼手册:2023 最新学习线路图

前言 有没有一种令人兴奋的学习方法&#xff1f;当然有&#xff01;绝对有&#xff01;而且我要告诉你&#xff0c;学习的快乐可以媲美游戏的刺激。 小学时代&#xff0c;我曾深陷于一款名为"八百万勇士的梦"的游戏。每当放学&#xff0c;我总是迫不及待地打开电脑&a…

ES(elasticsearch) - 三种姿势进行分页查询

1. from size 浅分页 "浅"分页可以理解为简单意义上的分页。它的原理很简单&#xff0c;就是查询前20条数据&#xff0c;然后截断前10条&#xff0c;只返回10-20的数据。这样其实白白浪费了前10条的查询。 GET test_dev/_search {"query": {"bool&…

【tg】 7 GroupInstanceCustomImpl

group GroupInstanceCustomImpl 核心GroupInstanceCustomInternal G:\CDN\P2P-DEV\tdesktop-offical\Telegram\ThirdParty\tgcalls\tgcalls\group\GroupInstanceCustomImpl.h 最核心是是GroupInstanceCustomInternal: private:std::shared_ptr<Threads> _threads;std::u…

财报解读:步步逼近ChatGPT,科大讯飞即将迎来全面爆发?

10月份&#xff0c;科大讯飞进入新的成果验证节点。 一是进一步透露AI进展的财报发布。三季报显示&#xff0c;科大讯飞仍然保持较为稳健的发展步伐&#xff0c;营收始终处于增长状态&#xff0c;对讯飞星火认知大模型的应用成果&#xff0c;进行了进一步揭示。基于此&#xf…

基于LSTM encoder-decoder模型实现英文转中文的翻译机器

前言 神经网络机器翻译(NMT, neuro machine tranlation)是AIGC发展道路上的一个重要应用。正是对这个应用的研究&#xff0c;发展出了注意力机制&#xff0c;在此基础上产生了AIGC领域的霸主transformer。我们今天先把注意力机制这些东西放一边&#xff0c;介绍一个对机器翻译…