vue 上传文件至阿里云oss

先让后端在阿里云里面处理跨域问题

参考这篇文章   vue直传图片到阿里云OSS（单张直接上传）__小郑有点困了的博客-CSDN博客_vue 阿里云背景：近期项目使用到多图片上传功能，常规的调用后端接口上传，可能会出现上传速度慢，体验不佳的情况。那么就考虑另一种上传方式。由前端直接上传到oss。快的一匹。。。经过摸索，也实现了。代码其实没啥难度，问题都出在阿里云这里，例如：跨域，读写权限等等，以及一个十分恶心的坑（竟然不能把目标文件夹写到配置参数里面，就很无语，百试不得，后来拼在了图片路径前面，达到了效果）首先你得去阿里云开启一个对象存储oss服务：略还得去创建一个AccessKey这两个是关键项还得创建一个bucket，用于存放https://blog.csdn.net/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-shenzhen.aliyuncs.com', //填写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页面  完整代码