oss vue上传文件功能封装

oss vue上传文件功能

参考 文章:

https://blog.csdn.net/weixin_48215380/article/details/124684370

在项目中使用 安装 ali-oss第三方库

npm install ali-oss --save
or
yarn add ali-oss

在项目中新建一个oss.js文件(用于放置我们的配置项)

import OSS from 'ali-oss'
// or
// const OSS = require('ali-oss')
 
export const client = new OSS({
    region: 'oss-cn-hangzhou', // oss地址
    accessKeyId: 'xxxxxxxxxxx', // 通过阿里云控制台创建的AccessKey ID。
    accessKeySecret: 'xxxxxxxxxxx', // 通过阿里云控制台创建的AccessKey Secret。
    bucket: 'xxxxxxxxxxx', // 仓库名字
    useFetch: true, // 支持上传大于100KB的文件
    secure:true // 返回的url为https
})
 
export const headers = {
    // 指定该Object被下载时网页的缓存行为。
    "Cache-Control": "no-cache",
    // 指定该Object被下载时的名称。
    "Content-Disposition": "inline",
    // 指定该Object被下载时的内容编码格式。
    "Content-Encoding": "UTF-8",
    // 指定过期时间。
    Expires: "Wed, 08 Jul 2023 16:57:01 GMT",
    // 指定Object的存储类型。
    "x-oss-storage-class": "Standard",
    // 指定Object的访问权限。
    // "x-oss-object-acl": "private",
    // 设置Object的标签，可同时设置多个标签。
    "x-oss-tagging": "Tag1=1&Tag2=2",
    // 指定CopyObject *** 作时是否覆盖同名目标Object。此处设置为true，表示禁止覆盖同名Object。
    "x-oss-forbid-overwrite": "true",
    // "secure": "true"
};

在组件中使用

<template>
  <el-upload
    class="upload-demo"
    action=""
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    multiple
    :limit="3"
    :on-exceed="handleExceed"
    :file-list="fileList"
    :http-request="httpRequest"
  >
    <el-button type="primary">Click to upload</el-button>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500KB.
      </div>
    </template>
  </el-upload>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { client, headers } from "../utils/oss.js";
import { ElMessage, ElMessageBox } from "element-plus";

import type { UploadProps, UploadUserFile } from "element-plus";

const fileList = ref<UploadUserFile[]>([]);

const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
  console.log(uploadFile);
};

const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  );
};

const beforeRemove: UploadProps["beforeRemove"] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfert of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  );
};

const httpRequest = (file) => {
  console.log(file);
  const tmpcnt = file.file.name.lastIndexOf("."); // 获取.的下标
  const uploadFileName = file.file.name.substring(0, tmpcnt); // 获取文件名
  console.log(uploadFileName, "文件名——uploadFileName");
  const exname = file.file.name.substring(tmpcnt + 1); // 获取后缀名
  console.log(exname, "后缀名");
  const fileName = "icon/" + uploadFileName;

  client
    .put(fileName, file.file, {
      headers,
    })
    .then((res) => {
      console.log("res", res);
    })
    .catch((err) => {
      console.log(err, "err");
    });
};

onMounted(async () => {
  let res = await client.list();
  console.log("res1", res);
});
</script>

自定义目录的话，直接修改文件名就行

 const fileName = "icon/" + uploadFileName;

api文档使用：https://help.aliyun.com/document_detail/111265.html

如果不设置跨域的话，会出现跨域问题：

登录自己的阿里云服务器

注意点：

本地上传oss是http,服务器是https的就会出现问题，需要在oss.js文件里边配置，配置完之后在上传一下，就能看到返回的url是https

secure:true // 返回的url为https