先让后端在阿里云里面处理跨域问题
参考这篇文章 vue直传图片到阿里云OSS（单张直接上传）__小郑有点困了的博客-CSDN博客_vue 阿里云背景：近期项目使用到多图片上传功能，常规的调用后端接口上传，可能会出现上传速度慢，体验不佳的情况。那么就考虑另一种上传方式。由前端直接上传到oss。快的一匹。。。经过摸索，也实现了。代码其实没啥难度，问题都出在阿里云这里，例如：跨域，读写权限等等，以及一个十分恶心的坑（竟然不能把目标文件夹写到配置参数里面，就很无语，百试不得，后来拼在了图片路径前面，达到了效果）首先你得去阿里云开启一个对象存储oss服务：略还得去创建一个AccessKey这两个是关键项还得创建一个bucket，用于存放/qq_44706619/article/details/121740097
首先创建js文件 alioss.js
// var OSS = require('ali-oss');import OSS from "ali-oss";export function client() {var client = new OSS({endpoint: 'oss-cn-', //填写Bucket所在地域accessKeyId: 'LTAI5tKPHzrjLd3CW2JWmYBo',accessKeySecret: 'B8UhIGIu2GIqxTBz0YRZF2j7S1x3IZ',bucket: 'echuxian', // 填写Bucket名称。}) //后端提供数据return client}const headers = {// 指定该Object被下载时的网页缓存行为。// "Cache-Control": "no-cache",// 指定该Object被下载时的名称。// "Content-Disposition": "example.txt",// 指定该Object被下载时的内容编码格式。// "Content-Encoding": "utf-8",// 指定过期时间，单位为毫秒。// Expires: "1000",// 指定Object的存储类型。// "x-oss-storage-class": "Standard",// 指定Object的访问权限。'x-oss-object-acl': 'public-read',// 指定Object标签，可同时设置多个标签。// "x-oss-tagging": "Tag1=1&Tag2=2",// 指定初始化分片上传时是否覆盖同名Object。此处设置为true，表示禁止覆盖同名Object。// "x-oss-forbid-overwrite": "true",}/*** 生成随机uuid*/export const getFileNameUUID = () => {function rx() {return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)}return `${+new Date()}_${rx()}${rx()}`}export {headers}
vue页面 完整代码
<template><div class="component-upload-image"><el-upload :action="uploadImgUrl" v-model="Addfrom.url" :http-request="uploadURL" :multiple='true':before-upload="handleBeforeUpload" :on-error="handleUploadError"style="display: inline-block; vertical-align: top"><el-image v-if="!Addfrom.url" :src="Addfrom.url"><div slot="error" class="image-slot"style="width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; border: 1px solid #eee;"><i class="el-icon-plus" /></div></el-image><div v-else class="image"><el-image :src="Addfrom.url" :style="`width:150px;height:150px;`" fit="fill" /><div class="mask"><div class="actions"><span title="预览" @click.stop="dialogVisible = true"><i class="el-icon-zoom-in" /></span><span title="移除" @click.stop="removeImage"><i class="el-icon-delete" /></span></div></div></div></el-upload><el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body><img :src="Addfrom.url" style="display: block; max-width: 100%; margin: 0 auto;"></el-dialog></div></template><script>import {client,headers,getFileNameUUID} from '@/utils/alioss.js'export default {props: {value: {type: String,default: "",},},data() {return {dialogVisible: false,Addfrom: {url: ''}};},methods: {// 上传文件之前handleBeforeUpload() {this.loading = this.$loading({lock: true,text: "上传中",background: "rgba(0, 0, 0, 0.7)",});},// 自定义上传uploadURL(file) {//注意哦，这里指定文件夹'fgycximg/'，尝试过写在配置文件，但是各种不行，写在这里就可以var fileName = 'fgycximg/' + `${Date.parse(new Date())}` + '.jpg';client().multipartUpload(fileName, file.file, {headers}, {progress: function(percentage, cpt) {console.log('打印进度', percentage)}}).then((res) => {this.Addfrom.url = res.res.requestUrls[0]var fileSrc = "https://ycximg.link-/" + res.namethis.$emit("input", fileSrc);this.loading.close();})},// 删除removeImage() {this.$emit("input", "");this.Addfrom.url = ""},// 成功handleUploadSuccess(res) {this.$emit("input", res.url);this.loading.close();},// 失败handleUploadError() {this.$message({type: "error",message: "上传失败",});this.loading.close();},}}</script><style scoped lang="scss">.image {position: relative;.mask {opacity: 0;position: absolute;top: 0;width: 100%;background-color: rgba(0, 0, 0, 0.5);transition: all 0.3s;}&:hover .mask {opacity: 1;}}</style><style>.el-upload-list {display: none;}</style>
