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,一经查实,立即删除!

相关文章

面试题 03.04. 动物收容所

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;面试题 03.06. 动物收容所 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 使用两个队列分别记录猫狗信息。 收容&#xff1a;记录该动物是猫还是狗后&#xff0c;将猫狗标志修改为收容时间…

一、【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;以实用面积计算需要多少空间。空间…

LinkedBlockingQueue源码解析

概念 LinkedBlockingQueue是非固定容量队列&#xff0c;内部是通过链表存放数据&#xff0c;并通过两把互斥锁&#xff08;分别为取时互斥锁和放时互斥锁&#xff0c;这也是与ArrayBlockingQueue的本质区别&#xff0c;这样可以提高性能&#xff09;来控制访问数据的同步问题。…

NOIP2023模拟3联测24-博弈树

Alice \text{Alice} Alice 和 Bob \text{Bob} Bob 又开始玩游戏了&#xff0c;他们已经把石子堆得比山还高了&#xff0c;现在他们要玩一种更新奇的游戏&#xff0c;这种游戏的规则如下&#xff1a; 给定一颗 n n n 个节点的树&#xff0c; Alice \text{Alice} Alice 和 Bo…

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

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

前端下载文件

下载文件最简单的方式&#xff0c;就是后端提供一个下载地址。前端只需要a链接绑定这个下载地址即可 <a href"下载地址" download>下载</a> download也可以等于一个值&#xff0c;这个值就是文件名 但是如果后端传给我们的是一个文本或者字节流&#xf…

出差学小白知识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;就可以优先买票。普通人的话&…

Vue自定义指令实现按钮级的权限控制

通过v-指令&#xff0c;控制页面上的权限按钮的显示隐藏。首先是我的权限按钮数据&#xff0c;通过登录接口后端返回&#xff0c;前端将数据存在vuex里&#xff0c;在调用指令时候获取到当前页面对应的按钮权限数组&#xff0c;通过v-指令传递标识判断是否在当前页按钮权限数组…

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

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

代码训练营第51天:leetcode121买卖股票的最佳时机|leetcode122买卖股票的最佳时机2

leetcode121&#xff1a;买卖股票的最佳时机 文章讲解&#xff1a;leetcode121 leetcode122&#xff1a;买卖股票的最佳时机2 文章讲解&#xff1a;leetcode122 目录 1&#xff0c;leetcode121 买卖股票的最佳时机 2&#xff0c;leetcode122 买卖股票的最佳时机2 1&#xff0…

react中的函数式组件和类式组件

一、函数组件 1. 定义函数组件 在React中&#xff0c;函数组件&#xff08;Functional Component&#xff09;是一种通过纯粹的JavaScript函数定义的UI组件。函数组件采用函数的方式接收一个输入参数 props&#xff0c;并返回一个React元素或者一组React元素作为输出。定义函…

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

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

TS的内置类型-Pick,Omit

简介 今天我们聊聊Typescript的内置工具类型&#xff0c;其中有两个类型颇为有意思。那就是 Pick (选取) 和 Omit (排除)。 核心&#xff1a;Pick 与 Omit 从现有类型中得到可复用类型 Pick 作用&#xff1f; 从类型对象中选取指定的属性类型 Omit 作用&#xff1f; 从类型…

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…