vue项目页面上传图片至oss

最新推荐文章于 2025-03-24 17:25:50 发布

原创

最新推荐文章于 2025-03-24 17:25:50 发布

· 1k 阅读

5 ·

版权

文章标签：

#vue #js

之前上传图片都是先通过接口将/xxx/xx/xxx(图片本地路径)传递给后端，后端将图片上传至oss，然后返回线上地址，然后我在展示，后来说考虑网络带宽，资源消耗，上传改成页面上传，提交表单的时候，直接给后端返回线上oss图片地址，下面我们来看看如何实现页面上传。

1.下载阿里云oss包

npm i ali-oss

2. utils下面创建client.js文件(连接oss和封装上传方法)

//client.js
const OSS = require('ali-oss');//引入oss
import {
    get_sts } from '@/api/login'//获取sts账号的api 用于登录oss

/**
 * 
 * @param {string} file_path  上传到oss目录路径
 * @param {string} file_name  上传文件名
 * @param {file} file         文件
 */
export async function upload_images_oss (file_path, file_name, file) {
   
  let file_name_arr = file_name.split('.')
  let upload_file_name = `${
     file_name_arr[0]}${
     Date.now