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页面  完整代码

<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-bl.com/" + res.name
          this.$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>