vue直传图片到阿里云OSS（单张直接上传）

背景：

近期项目使用到多图片上传功能，常规的调用后端接口上传，可能会出现上传速度慢，体验不佳的情况。那么就考虑另一种上传方式。由前端直接上传到oss。快的一匹。。。
经过摸索，也实现了。代码其实没啥难度，问题都出在阿里云这里，例如：跨域，读写权限等等，以及一个十分恶心的坑（竟然不能把目标文件夹写到配置参数里面，就很无语，百试不得，后来拼在了图片路径前面，达到了效果）

首先你得去阿里云开启一个对象存储oss服务：

略

还得去创建一个AccessKey

这两个是关键项

还得创建一个bucket，用于存放你的东西

这里面你可以创建文件夹，将图片指定到这个文件夹了，就不会杂乱的放在公共目录了，当然这个创建文件件的操作，最好是交给后端来做，在请求接口拿secretKey这些东西的时候，让后端一并返回。

读写权限打开：

改成公共读写

创建跨域规则

1，

2，

3，

4，规则如下：

以上已做好所有准备，可以去vue项目中编写上传相关代码了

安装ali-oss

npm install ali-oss

vue代码：


<template><el-upload class="avatar-uploader" action="" v-model="Addfrom.url" :http-request="uploadURL":multiple = true :before-upload="handleBeforeUpload" :limit="8"><img v-if="Addfrom.url" :src="Addfrom.url" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>
</template>
<script>import {client,   getFileNameUUID} from './alioss.js'export default {data() {return {fileList: [],Addfrom:{url:''}};},methods: {// 上传文件之前handleBeforeUpload(file) {const isJPEG = file.name.split('.')[1] === 'jpeg';const isJPG = file.name.split('.')[1] === 'jpg';const isPNG = file.name.split('.')[1] === 'png';const isWEBP = file.name.split('.')[1] === 'webp';const isGIF = file.name.split('.')[1] === 'gif';const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4;if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');}if (!isLt500K) {this.$message.error('单张图片大小不能超过 4mb!');}return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;},uploadURL(file) {//注意哦，这里指定文件夹'image/'，尝试过写在配置文件，但是各种不行，写在这里就可以var fileName = 'image/'+'banner' + `${Date.parse(new Date())}` + '.jpg'; //定义唯一的文件名，打印出来的uid其实就是时间戳client().multipartUpload(fileName, file.file,{progress: function(percentage, cpt) {console.log('打印进度',percentage)}}).then((res)=>{//此处赋值，是相当于上传成功之后，手动拼接服务器地址和文件名this.Addfrom.url = 'https://xxx-oss.oss-cn-beijing.aliyuncs.com/' + fileName;})},}}
</script>

alioss.js

// var OSS = require('ali-oss');
import OSS from "ali-oss";
export function client(){var client = new OSS({endpoint: 'oss-cn-beijing.aliyuncs.com',//填写Bucket所在地域accessKeyId: 'LTAxxxxxxxxxxxxxxxxxxxRAQn',accessKeySecret: 'NxexxxxxxxxxxxxxxxxxxxxxxGG2',bucket: 'zyp-oss',// 填写Bucket名称。})  //后端提供数据 return client
}
/*** 生成随机uuid*/
export const getFileNameUUID = () => {function rx() {return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)}return `${+new Date()}_${rx()}${rx()}`
}

页面效果：

点击选择文件

上传成功回显

看看oss中

两种上传方式的区别：

见阿里：添加链接描述

put：简单上传，不可使用进度条

MultipartUpload：分片上传

END

vue直传图片到阿里云OSS（单张直接上传）相关推荐

Spring boot上传文件（图片）到阿里云OSS（直接上传到应用服务器）
Spring boot上传文件(图片)到阿里云OSS(直接上传到应用服务器) 主要思路上传图片的思路有两种: 第一种是上传到应用服务器,再由应用服务器上传到OSS.这种适合上传的文件较小,较为简单, ...
阿里云 OSS SDK ：上传的图片直接访问变成下载问题解决
文章目录阿里云 OSS SDK :上传的图片直接访问变成下载问题解决 1.产生原因 2.解决方案阿里云 OSS SDK :上传的图片直接访问变成下载问题解决 1.产生原因上传的文件,未指定文件访 ...
vue plupload 的使用，阿里云OSS PHP 安全上传
1. 首选npm安装plupload 2. 阿里云OSS PHP 安全上传 <template> <div class="imgUpload"> ...
使用阿里云OSS实现文件上传
概述场景文件上传,是程序开发中必须会使用到的一个功能,比如: 添加商品,用户头像,文章封面等需求富文本编辑(插件文件上传) 文件上传的原理是什么? 我们为什么要实现文件上传,其实就要共享资源,大家 ...
阿里云oss简单的上传下载删除（java）
阿里云oss上传和下载. 配置maven  ...
阿里云oss h5页面上传实践
一.目的:将手机端的图片或者视频上传至阿里云oss服务器,同时返回资源url 二.原理:https://help.aliyun.com/document_detail/31988.html?spm=a ...
阿里云 oss多文件上传
平时在做 oss 上传时,通过都是单个文件上传,但是前几天工作时涉及到多个文件的上传,在所有文件都上传完成后才能再做后续的代码执行.于是在原有的oss上传基础上添加for循环去挨个上传. 介绍一下,o ...
阿里云OSS Multipart Upload上传实例
原来是用的PutObject()方式上传文件的,但是当文件比较大的时候,总是报一个对方强制关闭连接导致上传失败.PS:公司的网比较渣,10MB的文件都传不上去,搜了下,说使用Multipart Upl ...
Thinkphp5.0 阿里云OSS扩展类上传示例（轮子）
转载请声明出处! 环境必须:阿里云OSS php SDK 阿里云OSS php SDK地址:https://github.com/aliyun/aliyun-oss-php-sdk?spm=a2c4g ...

vue直传图片到阿里云OSS（单张直接上传）

背景：

首先你得去阿里云开启一个对象存储oss服务：

还得去创建一个AccessKey

还得创建一个bucket，用于存放你的东西

读写权限打开：

创建跨域规则

安装ali-oss

vue代码：

alioss.js

页面效果：

两种上传方式的区别：

END

vue直传图片到阿里云OSS（单张直接上传）相关推荐

最新文章

热门文章