SpringBoot3 + uniapp 对接 阿里云0SS 实现上传图片视频到 0SS 以及 0SS 里删除图片视频的操作(最新)

SpringBoot3 + uniapp 对接 阿里云0SS 实现上传图片视频到 0SS 以及 0SS 里删除图片视频的操作

    • 最终效果图
    • uniapp 的源码
      • UpLoadFile.vue
      • deleteOssFile.js
      • http.js
    • SpringBoot3 的源码
      • FileUploadController.java
      • AliOssUtil.java

最终效果图


在这里插入图片描述

uniapp 的源码

UpLoadFile.vue


 <template><!-- 上传start --><view style="display: flex; flex-wrap: wrap;"><view class="update-file"><!--图片--><view v-for="(item,index) in imageList" :key="index"><view class="upload-box"><image class="preview-file" :src="item" @tap="previewImage(item)"></image><view class="remove-icon" @tap="delect(index)"><u-icon name="trash"></u-icon><!-- <image src="../../static/images/del.png" class="del-icon" mode=""></image> --></view></view></view><!--视频--><view v-for="(item1, index1) in srcVideo" :key="index1"><view class="upload-box"><video class="preview-file" :src="item1"></video><view class="remove-icon" @tap="delectVideo(index1)"><u-icon name="trash"></u-icon><!-- <image src="../../static/images/del.png" class="del-icon" mode=""></image> --></view></view></view><!--按钮--><view v-if="VideoOfImagesShow" @tap="chooseVideoImage" class="upload-btn"><!-- <image src="../../static/images/jia.png" style="width:30rpx;height:30rpx;" mode=""></image> --><view class="btn-text">上传</view></view></view></view><!-- 上传 end --></template><script>import {deleteFileApi} from '../../api/file/deleteOssFile';var sourceType = [['camera'],['album'],['camera', 'album']];export default {data() {return {hostUrl: "http://192.168.163.30:9999/api/file/upload",// 上传图片视频VideoOfImagesShow: true, // 页面图片或视频数量超出后,拍照按钮隐藏imageList: [], //存放图片的地址srcVideo: [], //视频存放的地址sourceType: ['拍摄', '相册', '拍摄或相册'],sourceTypeIndex: 2,cameraList: [{value: 'back',name: '后置摄像头',checked: 'true'}, {value: 'front',name: '前置摄像头'}],cameraIndex: 0, //上传视频时的数量//上传图片和视频uploadFiles: [],}},onUnload() {// 上传this.imageList = [];this.sourceTypeIndex = 2;this.sourceType = ['拍摄', '相册', '拍摄或相册'];},methods: {//点击上传图片或视频chooseVideoImage() {uni.showActionSheet({title: '选择上传类型',itemList: ['图片', '视频'],success: res => {console.log(res);if (res.tapIndex == 0) {this.chooseImages();} else {this.chooseVideo();}}});},//上传图片chooseImages() {uni.chooseImage({count: 9, //默认是9张sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], //从相册选择success: res => {console.log(res, 'ddddsss')let imgFile = res.tempFilePaths;imgFile.forEach(item => {uni.uploadFile({url: this.hostUrl, //仅为示例,非真实的接口地址method: "POST",header: {token: uni.getStorageSync('localtoken')},filePath: item,name: 'file',success: (result) => {let res = JSON.parse(result.data)console.log('打印res:', res)if (res.code == 200) {this.imageList = this.imageList.concat(res.data);console.log(this.imageList, '上传图片成功')if (this.imageList.length >= 9) {this.VideoOfImagesShow = false;} else {this.VideoOfImagesShow = true;}}uni.showToast({title: res.msg,icon: 'none'})}})})}})},//上传视频chooseVideo(index) {uni.chooseVideo({maxDuration: 120, //拍摄视频最长拍摄时间,单位秒。最长支持 60 秒count: 9,camera: this.cameraList[this.cameraIndex].value, //'front'、'back',默认'back'sourceType: sourceType[this.sourceTypeIndex],success: res => {let videoFile = res.tempFilePath;uni.showLoading({title: '上传中...'});uni.uploadFile({url: this.hostUrl, //上传文件接口地址method: "POST",header: {token: uni.getStorageSync('localtoken')},filePath: videoFile,name: 'file',success: (result) => {uni.hideLoading();let res = JSON.parse(result.data)if (res.code == 200) {console.log(res);this.srcVideo = this.srcVideo.concat(res.data);if (this.srcVideo.length == 9) {this.VideoOfImagesShow = false;}}uni.showToast({title: res.msg,icon: 'none'})},fail: (error) => {uni.hideLoading();uni.showToast({title: error,icon: 'none'})}})},fail: (error) => {uni.hideLoading();uni.showToast({title: error,icon: 'none'})}})},//预览图片previewImage: function(item) {console.log('预览图片', item)uni.previewImage({current: item,urls: this.imageList});},// 删除图片delect(index) {uni.showModal({title: '提示',content: '是否要删除该图片',success: res => {if (res.confirm) {deleteFileApi(this.imageList[index].split("/")[3]);this.imageList.splice(index, 1);}if (this.imageList.length == 4) {this.VideoOfImagesShow = false;} else {this.VideoOfImagesShow = true;}}});},// 删除视频delectVideo(index) {uni.showModal({title: '提示',content: '是否要删除此视频',success: res => {if (res.confirm) {console.log(index);console.log(this.srcVideo[index]);deleteFileApi(this.srcVideo[index].split("/")[3]);this.srcVideo.splice(index, 1);}if (this.srcVideo.length == 4) {this.VideoOfImagesShow = false;} else {this.VideoOfImagesShow = true;}}});},// 上传 end}}</script><style scoped lang="scss">// 上传.update-file {margin-left: 10rpx;height: auto;display: flex;justify-content: space-between;flex-wrap: wrap;margin-bottom: 5rpx;.del-icon {width: 44rpx;height: 44rpx;position: absolute;right: 10rpx;top: 12rpx;}.btn-text {color: #606266;}.preview-file {width: 200rpx;height: 180rpx;border: 1px solid #e0e0e0;border-radius: 10rpx;}.upload-box {position: relative;width: 200rpx;height: 180rpx;margin: 0 20rpx 20rpx 0;}.remove-icon {position: absolute;right: -10rpx;top: -10rpx;z-index: 1000;width: 30rpx;height: 30rpx;}.upload-btn {width: 200rpx;height: 180rpx;border-radius: 10rpx;background-color: #f4f5f6;display: flex;justify-content: center;align-items: center;}}.guide-view {margin-top: 30rpx;display: flex;.guide-text {display: flex;flex-direction: column;justify-content: space-between;padding-left: 20rpx;.guide-text-price {padding-bottom: 10rpx;color: #ff0000;font-weight: bold;}}}.service-process {background-color: #ffffff;padding: 20rpx;padding-top: 30rpx;margin-top: 30rpx;border-radius: 10rpx;padding-bottom: 30rpx;.title {text-align: center;margin-bottom: 20rpx;}}.form-view-parent {border-radius: 20rpx;background-color: #FFFFFF;padding: 0rpx 20rpx;.form-view {background-color: #FFFFFF;margin-top: 20rpx;}.form-view-textarea {margin-top: 20rpx;padding: 20rpx 0rpx;.upload-hint {margin-top: 10rpx;margin-bottom: 10rpx;}}}.bottom-class {margin-bottom: 60rpx;}.bottom-btn-class {padding-bottom: 1%;.bottom-hint {display: flex;justify-content: center;padding-bottom: 20rpx;}}</style>

deleteOssFile.js


import http from "../../utils/httpRequest/http";// 删除图片
export const deleteFileApi = (fileName) =>{console.log(fileName);return http.put(`/api/file/upload/${fileName}`);
} 

http.js


const baseUrl = 'http://192.168.163.30:9999';
// const baseUrl = 'http://localhost:9999';
const http = (options = {}) => {return new Promise((resolve, reject) => {uni.request({url: baseUrl + options.url || '',method: options.type || 'GET',data: options.data || {},header: options.header || {}}).then((response) => {// console.log(response);if (response.data && response.data.code == 200) {resolve(response.data);} else {uni.showToast({icon: 'none',title: response.data.msg,duration: 2000});}}).catch(error => {reject(error);})});
}
/*** get 请求封装*/
const get = (url, data, options = {}) => {options.type = 'get';options.data = data;options.url = url;return http(options);
}/*** post 请求封装*/
const post = (url, data, options = {}) => {options.type = 'post';options.data = data;options.url = url;return http(options);
}/*** put 请求封装*/
const put = (url, data, options = {}) => {options.type = 'put';options.data = data;options.url = url;return http(options);
}/*** upLoad 上传* */
const upLoad = (parm) => {return new Promise((resolve, reject) => {uni.uploadFile({url: baseUrl + parm.url,filePath: parm.filePath,name: 'file',formData: {openid: uni.getStorageSync("openid")},header: {// Authorization: uni.getStorageSync("token")},success: (res) => {resolve(res.data);},fail: (error) => {reject(error);}})})
}export default {get,post,put,upLoad,baseUrl
}

SpringBoot3 的源码

FileUploadController.java

package com.zhx.app.controller;import com.zhx.app.utils.AliOssUtil;
import com.zhx.app.utils.ResultUtils;
import com.zhx.app.utils.ResultVo;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import java.util.UUID;/*** @ClassName : FileUploadController* @Description : 文件上传相关操作* @Author : zhx* @Date: 2024-03-01 19:45*/
@RestController
@RequestMapping("/api/file")
public class FileUploadController {@PostMapping("/upload")public ResultVo upLoadFile(MultipartFile file) throws Exception {// 获取文件原名String originalFilename = file.getOriginalFilename();// 防止重复上传文件名重复String fileName = null;if (originalFilename != null) {fileName = UUID.randomUUID() + originalFilename.substring(originalFilename.indexOf("."));}// 把文件储存到本地磁盘
//        file.transferTo(new File("E:\\SpringBootBase\\ProjectOne\\big-event\\src\\main\\resources\\flies\\" + fileName));String url = AliOssUtil.uploadFile(fileName, file.getInputStream());return ResultUtils.success("上传成功!", url);}@PutMapping("/upload/{fileName}")public ResultVo deleteFile(@PathVariable("fileName") String fileName) {System.out.println(fileName);if (fileName != null) {return AliOssUtil.deleteFile(fileName);}return ResultUtils.success("上传失败!");}
}

AliOssUtil.java


package com.zhx.app.utils;import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSException;
import com.aliyun.oss.model.PutObjectRequest;
import com.aliyun.oss.model.PutObjectResult;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;import java.io.IOException;
import java.io.InputStream;/*** @ClassName : AliOssUtil* @Description : 阿里云上传服务* @Author : zhx* @Date: 2024-03-1 20:29*/
@Component
public class AliOssUtil {private static String ENDPOINT;@Value("${alioss.endpoint}")public void setENDPOINT(String endpoint){ENDPOINT = endpoint;}private static String ACCESS_KEY;@Value("${alioss.access_key}")public void setAccessKey(String accessKey){ACCESS_KEY = accessKey;}private static String ACCESS_KEY_SECRET;@Value("${alioss.access_key_secret}")public void setAccessKeySecret(String accessKeySecret){ACCESS_KEY_SECRET = accessKeySecret;}private static String BUCKETNAME;@Value("${alioss.bucketName}")public void setBUCKETNAME(String bucketName){BUCKETNAME = bucketName;}public static String uploadFile(String objectName, InputStream inputStream) {String url = "";// 创建OSSClient实例。OSS ossClient = new OSSClientBuilder().build(ENDPOINT, ACCESS_KEY, ACCESS_KEY_SECRET);try {// 创建PutObjectRequest对象。PutObjectRequest putObjectRequest = new PutObjectRequest(BUCKETNAME, objectName, inputStream);// 如果需要上传时设置存储类型和访问权限,请参考以下示例代码。// ObjectMetadata metadata = new ObjectMetadata();// metadata.setHeader(OSSHeaders.OSS_STORAGE_CLASS, StorageClass.Standard.toString());// metadata.setObjectAcl(CannedAccessControlList.Private);// putObjectRequest.setMetadata(metadata);// 上传文件。PutObjectResult result = ossClient.putObject(putObjectRequest);url = "https://" + BUCKETNAME + "." + ENDPOINT.substring(ENDPOINT.lastIndexOf("/") + 1) + "/" + objectName;} catch (OSSException oe) {System.out.println("Caught an OSSException, which means your request made it to OSS, "+ "but was rejected with an error response for some reason.");System.out.println("Error Message:" + oe.getErrorMessage());System.out.println("Error Code:" + oe.getErrorCode());System.out.println("Request ID:" + oe.getRequestId());System.out.println("Host ID:" + oe.getHostId());} catch (ClientException ce) {System.out.println("Caught an ClientException, which means the client encountered "+ "a serious internal problem while trying to communicate with OSS, "+ "such as not being able to access the network.");System.out.println("Error Message:" + ce.getMessage());}  finally {if (ossClient != null) {ossClient.shutdown();}}return url;}public static ResultVo deleteFile(String objectName) {// 创建OSSClient实例。OSS ossClient = new OSSClientBuilder().build(ENDPOINT, ACCESS_KEY, ACCESS_KEY_SECRET);try {// 删除文件。ossClient.deleteObject(BUCKETNAME, objectName);return ResultUtils.success("删除成功!");} catch (OSSException oe) {System.out.println("Caught an OSSException, which means your request made it to OSS, "+ "but was rejected with an error response for some reason.");System.out.println("Error Message:" + oe.getErrorMessage());System.out.println("Error Code:" + oe.getErrorCode());System.out.println("Request ID:" + oe.getRequestId());System.out.println("Host ID:" + oe.getHostId());} catch (ClientException ce) {System.out.println("Caught an ClientException, which means the client encountered "+ "a serious internal problem while trying to communicate with OSS, "+ "such as not being able to access the network.");System.out.println("Error Message:" + ce.getMessage());} finally {if (ossClient != null) {ossClient.shutdown();}}return ResultUtils.error("上传失败!");}
}

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

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

相关文章

云服务器环境web环境搭建之JDK、redis、mysql

一、Linux安装jdk&#xff0c;手动配置环境 链接: https://pan.baidu.com/s/1LRgRC5ih7B9fkc588uEQ1whttps://pan.baidu.com/s/1LRgRC5ih7B9fkc588uEQ1w 提取码: 0413 tar -xvf 压缩包名 修改配置文件/etc/profile 二、安装redis环境 方案一&#xff1a; Linux下安装配置r…

clickhouse深入浅出

基础知识原理 极致压缩率 极速查询性能 列式数据库管理 &#xff0c;读请求多 大批次更新或无更新 读很多但用很少 大量的列 列的值小数值/短字符串 一致性要求低 DBMS&#xff1a;动态创建/修改/删除库 表 视图&#xff0c;动态查/增/修/删&#xff0c;用户粒度设库…

数据治理专家岗位的能力模型

数据治理专家的角色要求其具备全方位的专业素养与技能&#xff0c;不仅要有深厚的业务理解与数据技术功底&#xff0c;还需展现出卓越的领导力、团队协作与沟通能力&#xff0c;以驱动组织内部数据治理工作的高效运行与持续优化。以下是对数据治理专家各项能力的深入解读&#…

mac 配置前端开发环境brew,git,nvm,nrm

我的电脑是mac 3 pro 一、配置Homebrew 打开终端&#xff0c;执行指令 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"查看版本 brew -v 安装nvm brew install nvm 再执行 brew reinstall nvm 我这边安装好了…

JavaScript中的Blob、Buffer、ArrayBuffer和TypedArray详解

文章的更新路线&#xff1a;JavaScript基础知识-Vue2基础知识-Vue3基础知识-TypeScript基础知识-网络基础知识-浏览器基础知识-项目优化知识-项目实战经验-前端温习题&#xff08;HTML基础知识和CSS基础知识已经更新完毕&#xff09; 正文 摘要&#xff1a;本文详细介绍了JavaS…

kafka学习记录

文章目录 windows单机版kafka搭建步骤主题的增删改查操作消息的生产与消费 Windows集群版kafka搭建步骤 prettyZoo 尚硅谷Kafka教程&#xff0c;2024新版kafka视频&#xff0c;零基础入门到实战 【尚硅谷】Kafka3.x教程&#xff08;从入门到调优&#xff0c;深入全面&#xff0…

python使用uiautomator2操作雷电模拟器9并遇到解决adb 连接emulator-5554 unauthorized问题

之前写过一篇文章 python使用uiautomator2操作雷电模拟器_uiautomator2 雷电模拟器-CSDN博客 上面这篇文章用的是雷电模拟器4&#xff0c;雷电模拟器4.0.78&#xff0c;android版本7.1.2。 今天有空&#xff0c;再使用雷电模拟器9&#xff0c;android版本9来测试一下 uiauto…

谷歌不收录怎么办?

谷歌不收录首先你要确认自己网站有没有出问题&#xff0c;比如你的网站是否已经公开&#xff0c;rboot是否允许搜索引擎进来&#xff0c;网站架构有没有问题&#xff0c;面包屑的结构是否有问题&#xff0c;确保你的网站没问题 接下来就是优化这个过程&#xff0c;有内容&#…

基于博客系统的功能测试和性能测试

目录 项目介绍 项目功能 设计测试用例 功能测试--自动化测试 测试代码 登录测试 博客详情页测试 发布博客测试 删除博客测试 退出账号测试 性能测试 项目介绍 1.博客系统采用前后端分离的方法来实现&#xff0c;同时使用了数据库来存储相关的数据&#xff0c;同时将…

C语言 数据输入输出

本文 我们来说 数据的输入与输出 及数据的运算 在程序的运算工程中 往往需要输入一些数据 而程序的运算 所得到的运算结果又需要输出给用户 因此 数据的输入与输出 就显得非常重要 在C语言中 不提供专门的输入输出语句 所有的输入输出 都是通过对标准库的调用 来实现的 一般 …

权威Scrum敏捷开发企业级实训/敏捷开发培训课程

课程简介 Scrum是目前运用最为广泛的敏捷开发方法&#xff0c;是一个轻量级的项目管理和产品研发管理框架。 这是一个两天的实训课程&#xff0c;面向研发管理者、项目经理、产品经理、研发团队等&#xff0c;旨在帮助学员全面系统地学习Scrum和敏捷开发, 帮助企业快速启动敏…

idea工具使用Tomcat创建jsp 部署servlet到服务器

使用tomcat创建jsp 在tomcat官网中下载对应windows版本的tomcat文件 Apache Tomcat - Welcome! 解压到系统目录中&#xff0c;记得不要有中文路径 新建一个java项目 点击右上角 点击加号 找到Tomcat Service的 Local 点击右下角的Fix一下&#xff0c;然后ok关闭 再重新打开一…

Python | Leetcode Python题解之第27题移除元素

题目&#xff1a; 题解&#xff1a; class Solution:def removeElement(self, nums: List[int], val: int) -> int:a 0b 0while a < len(nums):if nums[a] ! val:nums[b] nums[a]b 1a 1return b

SpringCloudalibaba之Nacos的配置管理

Nacos的配置管理 放个妹子能增加访问量&#xff1f; 动态配置服务 动态配置服务可以让您以中心化、外部化和动态化的方式管理所有环境的应用配置和服务配置。 动态配置消除了配置变更时重新部署应用和服务的需要&#xff0c;让配置管理变得更加高效和敏捷。 配置中心化管…

AI虽强,搜索引擎仍不可或缺

AI 领域正以前所未有的速度发展&#xff0c;大模型的发布变得愈发频繁&#xff0c;模型的规模也在持续扩大。如今&#xff0c;大模型的起点已经攀升至数十亿参数&#xff08;数十 B&#xff0c;B 是 Billion 的简写&#xff0c;10 亿&#xff09;&#xff0c;其功能之广泛&…

搭建个人智能家居 4 -WS2812B-RGB灯

搭建个人智能家居 4 - WS2812B-RGB灯 前言说明ESPHomeHomeAssistant 前言 上一篇文章我们已经完成了第一个外设的添加&#xff08;一个LED灯&#xff09;&#xff0c;今天接着来“壮大”这个系统&#xff0c;添加第二个外设“RGB灯”。 环境搭建可以回顾前面的文章。前文回顾&…

arm工作模式、arm9通用寄存器、异常向量表中irq的异常向量、cpsr中的哪几位是用来设置工作模式以及r13,r14,15别名是什么?有什么作用?

ARM 首先先介绍一下ARM公司。 ARM成立于1990年11月&#xff0c;前身为Acorn计算机公司 主要设计ARM系列RISC处理器内核 授权ARM内核给生产和销售半导体的合作伙伴ARM公司不生产芯片 提供基于ARM架构的开发设计技术软件工具评估版调试工具应用软件总线架构外围设备单元等等CPU中…

Java 基于微信小程序的智能停车场管理小程序

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

【七 (1)FineBI FCP模拟试卷-股票收盘价分析】

目录 文章导航一、字段解释二、需求三、操作步骤1、添加计算字段&#xff08;每月最后一天的收盘价&#xff09;2、绘制折线图 文章导航 【一 简明数据分析进阶路径介绍&#xff08;文章导航&#xff09;】 一、字段解释 Company Name&#xff1a;公司名称 Date&#xff1a;…

亚远景科技-ASPICE 4.0-HWE硬件过程的范围 The Technical Scope of HW process

ASPICE 4.0中的HWE process是电气和电子硬件的技术范畴&#xff0c;涵盖了硬件工程中的需求分析、设计和验证活动&#xff0c;但不包括以下活动&#xff1a; 1. 系统级工程过程。既不包括机电一体MECHATRONIC&#xff0c;也不包括ECU特定电子控制单元的开发。 2. 硬件采购过程…