阿里云oss

公司的图片都是存储在阿里云的oss里，后台返回的图片都是***.png，需要转换成oss的图片地址

1.在环境配置文件.env.***文件里设置oss属性

ENV = 'production'
VUE_APP_BASE_API = '运维给的后端接口baseURL变量'

VUE_APP_REGION='你的region（变量）'
VUE_APP_ACCESSKEYID='你的AccessKeyId'
VUE_APP_ACCESSKEYSECRET='你的AccessKeySecret '
VUE_APP_BUCKET='你的bucket name（变量）'

2.封装获取oss图片地址的方法（src/utils/imgUrl.js）

import OSS from 'ali-oss'
const {
  VUE_APP_REGION: region,
  VUE_APP_ACCESSKEYID: accessKeyId,
  VUE_APP_ACCESSKEYSECRET: accessKeySecret,
  VUE_APP_BUCKET: bucket
} = process.env

export const getUrl = ossKey => {
  const client = new OSS({
    region,
    accessKeyId,
    accessKeySecret,
    bucket
  })
  const url = client.signatureUrl(ossKey)

  return url
}

3.页面使用

<img
            v-if="img"
            :src="getUrl(img)"
          />

<script>
import { getUrl } from '@/utils/imgUrl.js'

export default {
  data(){
    return{
      getUrl,//必须有
      img:null
    }
  },
  mounted(){
    this.img=1.png
  }
}
</script>

更多请看https://www.cnblogs.com/AnnieShen/p/11009802.html
https://blog.csdn.net/yangkangv/article/details/97688518
https://blog.csdn.net/yangkangv/article/details/88663167