vue项目页面上传图片至oss

之前上传图片都是先通过接口将/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()}.${file_name_arr[1]}`//这边是给文件名字后加时间戳 避免图片名字一样 照成图片覆盖

  let res = await get_sts()//接口数据获取
  let sts_account = res.data
  let client = new OSS({
    region: 'oss-cn-zhangjiakou',//这个可能和我不一样 后端反你 你就用后端反你的region
    accessKeyId: sts_account.accessKeyId,
    accessKeySecret: sts_account.accessKeySecret,
    stsToken: sts_account.securityToken,
    bucket: 'websrc'//bucket 可以理解为仓库  那么websrc就是oss根目录下的一个仓库名字
  })
  try {
  	//put上传方法     第一个参数文件名，   第二个参数文件
  	//如果指定目录的话 第一个参数可以写成 目录名/文件名  那么图片就会被上传到websrc/目录名/文件名  下  
    let result = await client.put(`${file_path}${upload_file_name}`, file);
    return result
  } catch (e) {
    console.log(e);
  }
}

3.页面调用上传方法

<el-upload
  accept="image/png,image/jpg,image/jpeg"
  action=""
  ref="upload"
  :file-list="slideshow_form.images"
  list-type="picture-card"
  :before-upload="(file)=>handle_upload_before(file,764,320)"
  :on-preview="handle_slideshow_preview"
  :on-remove="handle_slideshow_remove"
  :http-request="handle_slideshow_custom">
  <i class="el-icon-plus" style="margin-top: 35px;">
    <div style="font-size:12px;margin-top:10px">支持jpg,png,jpeg格式</div>
    <span style="font-size:12px">(764*320px)</span>
  </i>
</el-upload>

//1.引入上传方法
import { upload_images_oss } from "@/utils/client"
//2.自定义上传的回调里调用方法
//注意这里需要写async，因为上传的方法用的async的语法糖
async handle_advertising_custom(res){
   let file_path = 'mini-program/'//定义目录名
   let file_name = res.file.name
   let file = res.file
   let result = await upload_images_oss(file_path, file_name, file)//调用上传图片至oss的方法
   this.advertising_form.images.push( { url: result.url } )//result.url就是线上图片地址
 },