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

这篇具有很好参考价值的文章主要介绍了uniapp--点击上传图片到oss再保存数据给后端接口。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

一、项目要求与样式图

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

uniapp--点击上传图片到oss再保存数据给后端接口,uniapp,javascript,uniapp,vue.js,1024程序员节

二、思路

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

uniapp--点击上传图片到oss再保存数据给后端接口,uniapp,javascript,uniapp,vue.js,1024程序员节

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 = arry
				console.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}`].length
				lists.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 = arry
				console.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 = 1
							this.getBudgetList()
							this.showUp = false
							uni.showToast({
								title: `上传成功`,
								icon: 'none',
								duration: 2000,
							})
						}
					})
				} else {
					uni.showToast({
						title: `至少需要上传一张交付物图片`,
						icon: 'none',
						duration: 2000
					})
				}
			},
            /**
			* @func 上传图片取消,弹框关闭
			* */
			closePup(){
				this.showUp=false
				this.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地址

uniapp--点击上传图片到oss再保存数据给后端接口,uniapp,javascript,uniapp,vue.js,1024程序员节

		// 预览图片
			onPreviewImage(item) {
				if (!item.isImage || !this.previewFullImage) return
				uni.previewImage({
					// 先filter找出为图片的item,再返回filter结果中的图片url
					urls: 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博客文章来源地址https://www.toymoban.com/news/detail-720974.html

到了这里,关于uniapp--点击上传图片到oss再保存数据给后端接口的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringBoot项目上传图片(本地/OSS)

    可参考视频: 【springboot上传图片的两种方式详解(本地/OSS对象存储)】 https://www.bilibili.com/video/BV1TK411Z7ad/?share_source=copy_webvd_source=7f0416c71bcbaf44e08ad58367e3f198 视频前十分钟是从0开始编写图片保存到本地,可以照着视频敲出来,不想看也可以直接复制我下面的代码 在 Resources 目

    2023年04月14日
    浏览(43)
  • 【Node】腾讯云OSS存储上传图片

    目录 准备工作 后端Koa 前端Vue 建议 购买腾讯云OSS存储后需要获得以下几个变量 SecretId:秘钥id SecretKey:秘钥 Bucket:存储桶名称 可在腾讯云的图像界面创建存储桶 Region:购买时选择的区域 我这里是南京 prefix:可选 腾讯云中自定义的文件夹名称 我这里是indexImages 后端项目中

    2024年02月07日
    浏览(49)
  • JAVA开发(腾讯云OSS图片上传)

    需求背景: 项目中需要上传图片。 存储方式: 使用腾讯云的OSS组件。 代码实现: 1、使用腾讯云OSS需要使用的参数信息: OSS的域名; OSS的地域节点; OSS存储桶的名称; OSS权限凭证; OSS权限访问秘钥; OSS图片存储策略; 使用的缩略图策略; 允许上传的图片类型; 参数

    2024年02月11日
    浏览(53)
  • 【flutter直接上传图片到阿里云OSS】

    flutter直接上传文件到阿里云需要获取凭证,通过调用阿里云获取凭证的接口能拿到下面这些参数 获取凭证的接口一般是后台去对接阿里云,前端调后台接口即可。(STS.的这种AccessKeyId安全性高一些) 1.获取OSSToken信息 token信息实体类 上传方法 调用方式 以上直接是上传图片到

    2024年02月11日
    浏览(40)
  • 若依的多图片上传/回显/保存多图片路径url逗号隔开存数据库,前后端都有,拷贝即用

    用户在前端上传不等数量图片,现在需要把其相对/绝对路径存进数据库中,方便后期使用和页面回显. 后端存储pic字段是字符串 用于  用\\\",\\\"逗号  拼接 多个图片 url  1.html代码: 前端走马灯浏览已经上传的图片 前端JS方法,一共四个, 1.上传前校验方法 2.上传方法 3.上传数量限制方

    2024年02月16日
    浏览(48)
  • 使用SpringBoot将图片上传至阿里云OSS

    1. 什么是OSS? 官方的解释是这样的:阿里云对象存储OSS(Object Storage Service)是一款海量、安全、低成本、高可靠的云存储服务,提供99.9999999999%(12个9)的数据持久性,99.995%的数据可用性。 官网:对象存储OSS 2. 为什么要使用OSS? 作者认为主要是方便项目上线后的文件业务的处

    2024年02月06日
    浏览(46)
  • SpringBoot整合阿里云Oss实现文件图片上传

    目录 1. 阿里云Oss注册使用 2. 项目中使用 2.1 引入依赖以及插件 2.2 编写配置文件application.properties 2.3 创建常量类,获取配置信息  2.4 serviceImpl中实现逻辑            

    2024年02月08日
    浏览(68)
  • java实现上传图片或视频到oss中

    当上传图片和视频到OSS时,你可以使用阿里云的Java SDK来实现。以下是一个示例的Java代码,包括图片和视频的上传功能: 在上述代码中,你需要替换以下变量的值: ACCESS_KEY_ID和ACCESS_KEY_SECRET:阿里云的访问密钥,可以在阿里云控制台获取。 BUCKET_NAME:OSS存储桶的名称。 IMA

    2024年02月07日
    浏览(38)
  • Vue中实现图片上传,上传后的图片回显,存储图片到服务器 【使用对象存储OSS】

    前言 以下只提供一种思路,对新手可能不太友好。 这里将前端Vue上传的图片直接存储到服务器上, Alibaba Cloud OSS : 阿里云对象存储服务(Object Storage Service,简称 OSS),是阿里云提供的海量、安全、低成本、高可靠的云存储服务。您可以在任何应用、任何时间、任何地点存储

    2024年02月06日
    浏览(74)
  • JAVA通过阿里云OSS存储实现图片上传功能

    首先我们需要在阿里云注册账号,实名认证后开通OSS功能,点击进入OSS功能的管理平台 进入概览页面后,点击Bucket列表,创建一个Bucket(相当于一个存放文件的文件夹)  关键是要获得下面几个关键的信息,只有拥有这些信息才能连接上这个Bucket进行操作: 添加对应依赖  

    2024年02月05日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包