Vue项目中input标签提交图片，音频到阿里云

1、Vue安装oss

npm install ali-oss

2、新建js文件alioss.js 内容如下（可直接复制）

var OSS = require('ali-oss')
export function client () {
  var client = new OSS({
    region: 'oss-cn-hangzhou',
    accessKeyId: 'ID  运营会给你',
    accessKeySecret: '密钥  运营会给你',
    bucket: '阿里云bucket地址'
  })
  return client
}

3、在你需要上传图片的Vue页面中引入js
如 import { client } from ‘…/utils/alioss.js’

一切都准备就绪，下面就是input 和他的事件了

<input style="width: 100px;height: 100px;position: absolute;opacity: 0;z-index: 1;" type="file" class="bookPictureLi" name="file" accept="image/*" ref='input'  @change="targetChange($event)" />
                
下面是函数方法：
targetChange (e) {
      var that = this
      var file = e.target.files[0]
      var uploadPath = Date.now() + '_' + file.name // 自定义存储在阿里云中的名字
      client().put(uploadPath, file).then(function (response) {
        console.log(response.url)  // 阿里云返回的http地址
      })
    }

至此简单的上传图片就完成了，如果需要限制上传类型、大小，就在事件里对file做判断！

如果对你有帮助的记得点赞加关注呦，爱你们！