需要实现这个功能，然后就百度了会，找到了篇能直接拿过来用的demo。但是自己还是要记录一下，以后如果再使用的话就方便好多了。

开始

没有bucket就自己创建哦！

修改访问权限！

这里主要是配置读写，只有设置成公共读写，才可以前端直接上传，不需要跟后端要什么token了

正文如下

1. 安装 ali-oss npm i --save ali-oss

2. .新建aliyun_utils.js文件，（此文件主要是封装方法）

let OSS = require('ali-oss')
 
let client = new OSS({
    
  region: 'oss-cn-beijing',    //创建的时候，bucket所在的区域，华北2->oss-cn-beijing ；其他的可以去百度
  accessKeyId: 'wefwefwfwfwfwfwdwd2d32dw',// 阿里云控制台创建的AccessKey
  accessKeySecret: '123dwdw1e12e2e2d2fwefw', //阿里云控制台创建的AccessSecret
  bucket: 'xxxxx'  //创建的bucket的名称
})
 
export const put = async (ObjName, fileUrl) => {
      
  try {
        
    let result = await client.put(`${
      ObjName}`, fileUrl)    
    // ObjName为文件名字,可以只写名字，就直接储存在 bucket 的根路径，如需放在文件夹下面直接在文件名前面加上文件夹名称    
    return result  
  } catch (e) {
        
   console.log(e)  
  }
}
 
// 上传成功之后，转换真实的地址
export const signatureUrl= async (ObjName) => {
        
  try {
            
    let result = await client.signatureUrl(`${
      ObjName}`)    
    return result  
  } catch (e) {
        
    console.log(e)  
  }
}
 
export const getFileNameUUID = () => {
      
  function rx() {
        
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)  
  }  
  return `${
      +new Date()}_${
      rx()}${
      rx()}`
}

可以根据自己的需求修改，比如我的如下：

3. 引入element ui上传组件。下面代码是根据我自己的需求修改的，如果想更直观的看效果，可以前往原文。

<template>
	<div>
		# 这里不做过多解释，有需要前往elementu ui官网查看
		<el-upload class="upload-demo" action="#" :file-list="file_list"
                     list-type="picture" :http-request="frontend_qiniuyun_upload_resource"
                     accept="image/jpeg,image/gif,image/png" :limit="1">

            <el-button size="small" type="primary">点击前端上传</el-button>
            <div slot="tip" class="el-upload__tip">一次只能上传一张jpg/png/gif的照片，且不超过2M</div>
          </el-upload>
	</div>
</template>

<script>
import {
      put} from "@/js/aliyun_utils"
export default {
      
  name: 'photoAdd',
  data(){
      
    return {
      
      file_list:[]
    }
  },
  methods: {
      
    /**
     * 前端阿里云上传资源
     * @param file
     */
    frontend_aliyun_upload_resource(file) {
      

      // 获取文件的名称名，并加上需要上传的目录
      var obj = this.createFolderUrl() + file.file.name
      var _this = this
      // 调用 ali-oss 中的方法,flieName是存放的文件夹名称，可自己定义
      put(obj, file.file).then(res => {
      

        let image_url = "https://.....上传域名" + res.name
        const file_data = {
      
          name: res.name,
          url: image_url,
        }
        //存入file_list中
        _this.file_list.push(file_data)

      })
    },

    //创建文件夹路径
    createFolderUrl() {
      
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const directory = 'sm-frontend/' + year + '/' + month + '/';
      return directory;
    }
  }
}
</script>

4. 页面运行后发现没效果，打开控制台发现报错了。是跨域！！！进入阿里云更改配置，如下
   

补充

把阿里云里面现有的文件url整体的提取出来。这个我没试，暂时没需求，但也记录下吧。

const OSS = require('ali-oss');
 
 
//这里的配置和上传的配置保持一致，毕竟只是为了查询当前阿里云已存的所有文件url
const client = new OSS({
    
  accessKeyId: 'wefhwuifhweifhwefhwiof',  
  accessKeySecret: 'wefhwfwefwfwefewgretg',
  bucket: 'wefwfw',
  region: 'oss-cn-beijing',
});
 
let urls = []
async function list () {
    
  // 不带任何参数，默认最多返回100个文件。
  const result = await client.list();
  // console.log(result.objects.url);
  for(let i = 0;i < result.objects.length ;i++){
    
    let url = result.objects[i].url
    urls.push(url)
  }
  console.log(urls)
}
 
list();