前端上传到oss

安装oss

npm install ali-oss --save

import OSS from "ali-oss"; //引入oss


export async function ossClient(file, name) {

  if (!name) {
   // 自定义文件上传的名字
    name = "tools/material/avatar_lib/";
  }
  let fileName = `${name}img${Date.parse(new Date())}oss.png`;

   //这里的file文件是本地选择好图片的临时url地址，需要转换为blob格式
  const imgBlob = await fetch(file).then((r) => r.blob());
  const imgFile = new File([imgBlob], fileName, { type: imgBlob.type });
  
  var client = new OSS({

    //地区信息根据自己的地方信息选择不同的字段
    region: "oss-cn-hangzhou.aliyuncs.com",

    //下面的字段都是后端返回的缺一不可
    accessKeyId: data.accessid,
    accessKeySecret: data.access_secret,
    stsToken: data.security_token,
    bucket: data.bucket_name,
    endpoint: data.endpoint,
  }); //后端提供数据

  // 自定义请求头
  const headers = {
    
    "Content-Disposition": "inline",
  };

  // let fileName = `img${Date.parse(new Date())}${imgFile.name}`;
  try {
    const result = await client.put(fileName, imgFile, { headers });
    return result;
  } catch (error) {
    console.error("上传失败", error);
    // 处理上传失败的情况
  }
}

页面使用

<script setup>

//此路径为封装上传oss的js文件路径
import { ossClient } from "@/utils/alioss.js";


const onChooseImg = () => {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album"], //从相册选择
    success: async (res) => {
     // console.log(res);
      let result = await ossClient(res.tempFilePaths[0]);
     // console.log(result, "返回值");
    },
  });
};

</script>

<template>

   <view @tap="onChooseImg">选择图片</view>

</template>