vue前端上传图片到阿里云OSS,超详细上传图片与视频教程

vue前端直传图片与视频到阿里云OSS

    • 1. 简介与日常使用
    • 2. 为什么要这么干?是因为我司后端不行吗???(确实!)
    • 3. vue前端直传的操作
    • 4. 如何上传到阿里OSS指定文件夹呢?

在这里插入图片描述

1. 简介与日常使用

  • 阿里云OSS是一款由阿里巴巴云计算有限公司开发的基于云端的对象存储服务。它为企业和个人存储海量数据提供了完美的解决方案。
  • 简单来说就是一台服务器,可以把静态资源放进去存储,比如图片,视频,各种库,然后会给你一个链接,访问数据。
  • 日常使用的话,一般用这个工具,很方便,要存什么东西,直接拖进去就行。
  • 选择对应资源,右键便可以看到信息 => 链接啥的,详细信息。
    在这里插入图片描述

2. 为什么要这么干?是因为我司后端不行吗???(确实!)

  • 这种场景是提供给用户使用的,他们在各种系统里面,点击上传图片的操作,我们需要让文件直接传入阿里oss服务器。
  • 总不能给每个用户都提供一个OSS工具吧,怕麻烦,也怕骂娘。
  • 其实后端也能做,文件通过接口传入后端,他们来操作,那只怕是展示不了咱们前端的牛逼了
  • 再说一句:咱前端天下第一!!!
    在这里插入图片描述

3. vue前端直传的操作

  • 安装依赖 —— npm方式
npm install ali-oss
  • 或者 —— yarn方式
yarn add ali-oss
  • 如果很多地方都会用到,那么你可以封装到全局中去,比如这样:
    在这里插入图片描述
const OSS = require('ali-oss');const client = new OSS({// yourregion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。region: 'yourregion',// 从环境变量中获取访问凭证// 当然,以下两个也可以直接写死accessKeyId: process.env.OSS_ACCESS_KEY_ID,accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,// 填写Bucket名称。bucket: 'examplebucket'
});
  • 常用的就这么四个参数,如果你要更多,可以看文档
    在这里插入图片描述

  • 上面的参数如果不知道,问运维或者后端就行,一般是他们去处理,咱不干这破事。

  • 接下来就是哪里用到,哪里引入就行。你的文件路径肯定跟我的不一样,别乱来啊,兄弟!

import { client } from "@/utils/alioss.js";
  • template 部分,这里没啥特别,用element ui的就行
 <el-uploadclass="avatar-uploader":on-preview="handlePictureCardPreview":action="''":http-request="UploadFileFn":on-success="handleSuccess":on-error="handleError":on-change="fileChange":accept="'.img,.png,.jpg,.jpeg'":data="uploadImgData"multiple></el-upload>
  • 需要注意的是,action置为空,使用 http-request。
  • on-success 是不会触发的。
  • js 部分
UploadFileFn(file) {// 定义文件名 用时间戳,保证唯一性let fileName = 'demo' + `${Date.parse(new Date())}`+'.jpg'; client().multipartUpload(fileName, file.file).then((res) => {// 这里会返回信息// 如果返回了地址,而且能在浏览器打开看到文件就是ok了console.log(res)// 做你想做的事情,比如页面回显// 或者获取其他信息,名字等等this.imageUrl = res.url;})
}

4. 如何上传到阿里OSS指定文件夹呢?

  • 这里提供另一种写法,顺便封装一下,因为上传视频和上传图片都会用到。
   UploadFilePublic(file, type, suffix) {// type用来判断 是图片还是视频// suffix是后缀名let fileName = "adver" + `${Date.parse(new Date())}` + suffix;let client = new OSS({region: "oss-cn-xxx",accessKeyId: "xxx",accessKeySecret: "xxx",bucket: "xxx",});try {// 上传文件到指定文件夹const result = client.put("material/" + fileName, file.file);result.then((res, cal) => {console.log(res);this.$message.success("上传成功");// 这里是获取一些参数,顺便提供案例// 不要的去掉即可let obj = {// fileDuration: 0,fileName: fileName,filePath: res.url,fileSize: file.file.size,// 后缀名fileSuffix: res.name.match(/.[^.]+$/)[0],fileSignature: type == 'img' ? this.imgMd5 : this.videoMd5};// 图片上传if (type == "img") {// 做你想做的其他事情this.imageUrl = res.url;}// 视频上传if (type == "video") {// 做你想做的其他事情this.videoUrl = res.url;}});} catch (e) {console.error("上传失败:", e);}},
  • 推送到指定文件夹:
  • 没有这个文件夹会自行创建,若怕出错可以先在阿里OSS工具上先创建好此文件夹。
const result = client.put("material/" + fileName, file.file);

感谢大家的支持,最近尽量多更新一点,也希望大家能鼓励鼓励!

1. 希望本文能对大家有所帮助,如有错误,敬请指出

2. 原创不易,还请各位客官动动发财的小手支持一波(关注、评论、点赞、收藏)
3. 拜谢各位!后续将继续奉献优质好文
4. 如果存在疑问,可以私信我(主页有Q)

在这里插入图片描述

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

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

相关文章

python高级(补充)

闭包 闭包的定义: 在函数嵌套的前提下&#xff0c;内部函数使用了外部函数的变量&#xff0c;并且外部函数返回了内部函数&#xff0c;我们把这个使用外部函数变量的内部函数称为闭包 通过闭包的定义&#xff0c;我们可以得知闭包的形成条件: 1- 在函数嵌套(函数里面再定义…

【node-express】实现省县市/区三级联动接口

省县市/区三级联动接口 介绍接口步骤代码部分 介绍 源码地址&#xff1a;https://github.com/thinkasany/nestjs-course-code/tree/master/demo/address 使用 navicat 导入sql文件&#xff0c;新增表&#xff0c;然后只需要一个接口 localhost:3001/region?parentId1, 不断的…

Linux介绍、安装和常用指令

目录 Linux 介绍 Linux 发行版 安装 Linux 常用 Linux 指令 Linux 介绍 Linux 是一个广泛使用的开源操作系统&#xff0c;它是基于Unix的多用户、多任务系统&#xff0c;适用于服务器、桌面和嵌入式系统。Linux系统以其稳定性、安全性和灵活性而闻名。Linux的核心是Linux内…

SpringBoot运维(三)-- 多环境开发(yml多文件版)

目录 引言: 1. 多环境开发的配置 2. 多环境开发--根据功能拆分配置文件 引言: 多环境? 其实就是说你的电脑上写的程序最终要放到别人的服务器上去运行。每个计算机环境不一样࿰

Leetcode—2660.保龄球游戏的获胜者【简单】

2023每日刷题&#xff08;七十二&#xff09; Leetcode—2660.保龄球游戏的获胜者 实现代码 class Solution { public:int isWinner(vector<int>& player1, vector<int>& player2) {long long sum1 0, sum2 0;int n player1.size();for(int i 0; i &…

02之Python运算符与if结构

Day02之Python运算符与if结构 一、昨日回顾 1、回顾昨天的课程内容 略 2、回顾昨天的作业 定义变量&#xff0c;c1 ‘可乐’&#xff0c;c2 ‘牛奶’&#xff0c;通过Python代码把c1内容调整为牛奶&#xff0c;c2调整为可乐。 # 1、定义两个变量 c1 可乐 c2 牛奶# 2、…

Python实现张万森下雪了的效果

写在前面 即将步入婚宴殿堂的女主林北星&#xff0c;遭遇了男友展宇的毁约&#xff0c;生活和工作也变得一团糟。与此同时&#xff0c;她被时光老人带回了十八岁的高三时光&#xff0c;重新开启了自己的人生。林北星摆脱了展宇的束缚&#xff0c;认真准备高考&#xff0c;想要…

硬件调试-电源纹波测量

硬件调试-电源纹波测量 Fang XS.1452512966qq.com如果有错误&#xff0c;希望被指出&#xff0c;学习技术的路难免会磕磕绊绊量的积累引起质的变化感谢酸奶大佬提供的硬件技术指导&#xff1b; 电源纹波 百度百科定义如下&#xff1a; 纹波是由于直流稳定电源的电压波动而造…

VALL-E-X 容器化

创建基础镜像的dockerfile文件 FROM nvcr.io/nvidia/cuda:12.1.1-cudnn8-runtime-ubuntu22.04 ENV DEBIAN_FRONTENDnoninteractive ENV TZEurope/London RUN apt update && apt install python3-venv -y && apt install python3-pip -y && apt inst…

QML —— Button按钮、FileDialog选择框示例(附完整源码)

示例效果 相关对象 Button&#xff1a;按钮表示用户可以按下或点击的按钮控件。按钮通常用于执行操作或回答问题。典型的按钮有“确定”、“应用”、“取消”、“关闭”、“是”、“否”和“帮助”。按钮从AbstractButton继承其API。例如&#xff0c;您可以使用AbstractButton …

解决numpy.linalg.LinAlgError: singular matrix

目录 解决numpy.linalg.LinAlgError: singular matrix 1. 检查矩阵的条件数 2. 使用广义逆矩阵 3. 处理数据中的冗余信息 总结 解决numpy.linalg.LinAlgError: singular matrix 在使用NumPy进行线性代数运算时&#xff0c;有时候会遇到​​numpy.linalg.LinAlgError: sin…

如何开发一个类似美团小程序商家入驻

上线类似美团的小程序可以推动商业生态系统的优化和升级。小程序可以连接商家、用户和平台&#xff0c;促进信息流通和交易&#xff0c;提高整个生态系统的效率和效益。今天&#xff0c;我们分享如何开发一个类似美团小程序商家入驻的平台。大家点个关注点个赞&#xff0c;我们…

元道经纬相机信息化赋能光伏电站运维管理

近年来&#xff0c;我国光伏产业高速发展&#xff0c;尤其以分布式光伏发电项目增长迅速&#xff0c;为更好服务新能源发电&#xff0c;大力推广电能替代。与此同时&#xff0c;电力企业亟需改变落后的管理模式&#xff0c;借助信息化软件提升管理效率。 为了进一步提升光伏电…

声明 | 为打击假冒账号、恶意抄袭账号等诈骗活动,提升本账号权威,本博主特此郑重声明

声明 | 为打击假冒账号、恶意抄袭账号诈骗活动&#xff0c;提升本账号权威&#xff0c;本博主特此郑重声明 一、本账号为《机器学习之心》博主CSDN唯一官方账号&#xff0c;唯一联系方式见文章底部。 二、《机器学习之心》博主未授权任何第三方账号进行模型合作、程序设计、源…

腾讯云老用户优惠:轻量应用服务器2核2G4M带宽118元一年,3年540元

它急了&#xff0c;腾讯云急了&#xff0c;继阿里云推出99元新老用户同享的云服务器后&#xff0c;腾讯云轻量应用服务器2核2G4M配置也支持新老用户同享了&#xff0c;一年118元&#xff0c;3年540元&#xff0c;老用户也能买&#xff0c;50GB SSD系统盘&#xff0c;300GB 月流…

算法训练第五十天|123. 买卖股票的最佳时机 III、188. 买卖股票的最佳时机 IV

123. 买卖股票的最佳时机 III&#xff1a; 题目链接 给定一个数组&#xff0c;它的第 i 个元素是一支给定的股票在第 i 天的价格。 设计一个算法来计算你所能获取的最大利润。你最多可以完成 两笔 交易。 注意&#xff1a;你不能同时参与多笔交易&#xff08;你必须在再次购…

C#高级 03委托

1.delegate委托定义 委托需要先定义后使用 delegate void IntMethodInvoker&#xff08;int x&#xff09;;定义了一个委托InMethodInvoker&#xff0c;这个委托可以指向一个带一个int 类型参数&#xff0c;返回值为void的方法 2.Action委托和Func委托 Action委托引用了一个…

[Ray Tracing: The Next Week] 笔记

前言 本篇博客参照自《Ray Tracing: The Next Week》教程&#xff0c;地址为&#xff1a;https://raytracing.github.io/books/RayTracingTheNextWeek.html 该教程在ray tracing in one weekend的基础上&#xff0c;增加了运动模糊、BVH树、Texture映射、柏林噪声、光照、体积…

Appium如何实现移动端UI自动化测试呢?

Appium是一个开源跨平台移动应用自动化测试框架。 既然只是想学习下Appium如何入门&#xff0c;那么我们就直奔主题。文章结构如下&#xff1a; 为什么要使用Appium&#xff1f;如何搭建Appium工具环境?(超详细&#xff09;通过demo演示Appium的使用Appium如何实现移动端UI自…

EtcdKeeperFyne连接etcd工具及相关gcc编译问题踩坑处理

目录 一、项目地址: 二、直接编译错误信息: 三、尝试处理方案: