网站的推广费用,有用模板网在线制作免费网站,网址大全免费,精品展厅设计vue前端直传图片与视频到阿里云OSS 1. 简介与日常使用2. 为什么要这么干#xff1f;是因为我司后端不行吗#xff1f;#xff1f;#xff1f;#xff08;确实#xff01;#xff09;3. vue前端直传的操作4. 如何上传到阿里OSS指定文件夹呢? 1. 简介与日常使用
阿里云… 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-uploadclassavatar-uploader:on-previewhandlePictureCardPreview:action:http-requestUploadFileFn:on-successhandleSuccess:on-errorhandleError:on-changefileChange:accept.img,.png,.jpg,.jpeg:datauploadImgDatamultiple/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)
