文章是参考这一篇http://t.csdn.cn/Xl4J8+自己的想法结合

一:首先要有阿里云账号;

二:当拥有账号后新建Bucket

红框里的选中其他的随便填就可以(每个选项都有解释可以按自己需要选择)。

 

三:新建后点击这个Bucket的名称进入,在左侧下拉列表中找到“跨域设置”,进行跨域设置。

 四:点击创建规则即可创建(我这里创建了post请求方式,PUT,GET如果只需要一种请求方式建一种就可以)

 五:此时我们要知道我们的ID和密钥,鼠标浮动右上角个人中心看到“Access Key 管理”点进去,点击“创建Access Key”记住id和密码。然后就可以到程序内写代码了(如果已经有了也可以用现成的或者也可以新建)。

六:程序里:

1):前提:我写的是图片上传转链接,vue2,element-ui

2):oss前期引入

①先安装

npm i ali-oss -D

②然后引入才可以使用

import OSS from 'ali-oss'

 ③:要初始化一下

//data里声明:
      // 图片上传链接
      imageUrl: '',
      // oss参数
      client: null,
//create()里初始化
    // oss初始化
    this.client = new OSS({
      region: 'oss-cn-选择的城市拼音', 
      accessKeyId: '刚刚复制的ID', 
      accessKeySecret: '刚刚复制的密钥', 
      bucket: 'Bucket的名称'
    })

 ④:图片上传

       <el-form-item label="商品图片" prop="skuImage">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>

⑤:函数

 // 上传图片前的函数
    beforeAvatarUpload(file) {
      // 调oss上传文件
      this.put(file.name, file)
      // 阻止文件自动上传
      return false
    },
    // oss上传文件方法
    async put(name, file) {
      try {
        var fileName = new Date().getTime() + name
        // object-name可以自定义为文件名(例如file.txt)或目录(例如abc/test/file.txt)的形式,实现将文件上传至当前Bucket或Bucket下的指定目录。
        const result = await this.client.put(fileName, file)
        // console.log(result)
        this.imageUrl = result.url // 返回的上传图片地址
        this.ruleForm.skuImage = this.imageUrl
      } catch (e) {
        console.log(e)
      }
    },
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐