700字范文 > vue直传图片到阿里云OSS（单张直接上传）

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

时间：2021-12-16 00:27:59

背景：

近期项目使用到多图片上传功能，常规的调用后端接口上传，可能会出现上传速度慢，体验不佳的情况。那么就考虑另一种上传方式。由前端直接上传到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-/' + fileName;})},}}</script>

alioss.js

// var OSS = require('ali-oss');import OSS from "ali-oss";export function client(){var client = new OSS({endpoint: 'oss-cn-',//填写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()}`}