【Vue】Vue+Element-ui+OSS 上传图片

目录

1、安装Element-ui

2、安装阿里云的OSS

3、项目使用了Element-ui里面的上传组件（组件代码来自Element-ui官网）

4、如何使用OSS sts授权登录

---

1、安装Element-ui

npm i element-ui -s

2、安装阿里云的OSS

npm install ali-oss

3、项目使用了Element-ui里面的上传组件（组件代码来自Element-ui官网）

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :http-request="uploadFile"
  :on-change="handleChange"
  :file-list="fileList3">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList3: [{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }]
      };
    },
    methods: {
      handleChange(file, fileList) {
        this.fileList3 = fileList.slice(-3);
      }
    }
  }
</script>

参数	说明	类型
action	必选参数，上传的地址(接口)	string
on-remove	文件列表移除文件时的钩子	function(file, fileList)
on-success	文件上传成功时的钩子	function(response, file, fileList)
on-error	文件上传失败时的钩子	function(err, file, fileList)
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)
before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。(可检验上传文件格式）	function(file)
file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array
auto-upload	是否在选取文件后立即进行上传	boolean
http-request	覆盖默认的上传行为，可以自定义上传的实现	function

element-ui的上传组件在选择文件后默认直接上传到action地址，上传成功on-success方法function(response, file, fileList)返回如下参数：

response	服务器响应（上传成功以及文件信息，完整文件路径等信息）
file	上传的文件信息
fileList	上传的文件列表信息

我们使用阿里云的OSS存储服务，需要先获取sts授权，再调用OSS的上传API，所以这时候组件默认上传事件就不适用了，组件提供了 一个http-request参数，可以覆盖默认的方法，在选择文件后不自动上传，我们可以对图片进行操作、压缩等操作从而实现自定义上传

4、如何使用OSS sts授权登录

由于项目里使用的是阿里云的OSS sts授权登陆（什么是sts),通过自定义的规则，向服务器发送一个获取stsToken请求，请求通过后返回结果可以是JSON/xml，拿到里面的AccessKeyId、AccessKeySecret、SecurityToken参数

调用阿里云API主要核心代码如下：

// 调用后台接口返回过来的授权参数AccessKeyId、AccessKeySecret、SecurityToken
let client = new OSS({
    accessKeyId: data.AccessKeyId,
    accessKeySecret: data.AccessKeySecret,
    stsToken: data.SecurityToken,
    region: 'oss-cn-shenzhen', // oss地区
    bucket: '<OSS保存文件的文件名>'
})

// 拿到上传的文件
const f = this.file.raw

// 定义上传文件的名字+后缀
const storeAs = 'product/' + Date.parse(new Date()) + suffix

// 调用上传接口
client.multipartUpload(storeAs, f).then(function (response) {
    if (response.res.status === 200) {
       console.log('上传了')
    }
  }).catch(function (err) {
       console.error('error: ', err)
  })

storeAs是上传文件的名字，可以自定义，一般人会使用时间戳+后缀去定义。缺点是，如果在多线程下可能会出现重名的情况，所以推荐使用uuid+后缀的方式定义名字