文件上传Oss——纯前端（1）(小白笔记)

文件上传Oss——纯前端（1）

兄弟篇：
文件上传Oss——纯前端（2）(小白笔记)

文件上传Oss——前、后端结合(基于Springboot)(小白笔记)

参考阿里云官方文档进行简单上传

安装方法：npm install aliyun-oss

步骤一

创建实例：

getClient() {
      let OSS = require('ali-oss')
      this.client = new OSS({
        region: 'oss-cn-beijing',
        accessKeyId: 'LTAI*********jbo4',
        accessKeySecret: '6v*********ZMjkv',
        bucket: 'bucket名',
        path: '存储路径，默认根目录'
      })
    },

• region:查看方式：打开你的oss对象存储—>Bucket列表—>若未创建先创建一个—>创建好后打开(如图，红色框中的就是region)

• accessKeyId和accessKeySecret:查看方式：点击右上角头像—>点击AccessKey管理—>若没有还是先创建，查看accessKeySecret可能需要接收手机验证码获取

步骤二

获取文件(这边我以上传图片为例)，并上传

<input type="file" @change="uploadImage($event)"  id="fileBox" />

 uploadImage() {
      this.getClient()
      this.file = event.target.files[0]
      var _this = this
      async function put() {
        try {
          let result = await _this.client.put(event.target.files[0].name, _this.file)
          _this.inageSrc = result.url //这个result.url就是上传后的图片链接
        } catch (e) {
          console.log(e)
        }
      }
      put() //不可去掉
    },

谢谢，欢迎留言交流