Vue3.x+ElementUI+Axios+阿里云对象存储实现图片or文件上传

1.文件md5加密验证

import file2md5 from 'file2md5'
const md5 = await file2md5(file)
// md5为文件hash值

2.请求接口得到身份凭证

 const { code, data:{credentials} } = (await getUploadToken(……）
 
 console.log(credentials.access_key_id)

3.通过后台返回的身份凭证去阿里云校验

 import OSS from 'ali-oss' // 引入插件file

  const client = new OSS({
    region: region,
    accessKeyId: access_key_id,
    accessKeySecret: access_key_secret,
    stsToken: security_token,
    bucket: bucket_name,
    // secure: false,
    // StartTime: ~~(new Date().valueOf() / 1000),
    // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
    // ExpiredTime: expiration, // 时间戳，单位秒，如：1580000900
    // ScopeLimit: true, // 腾讯云细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
  })
  

4.校验通过上传文件

 client.put(url, file).then(
          (response: any) => {
            const {
              res: { status },
            } = response
            if (status === 200) {
              fileOption.status = 'success'
              // ElMessage.success(`${item.message}成功`)
              callback && callback(item.resolveParams)
            } else {
              fileOption.status = 'fail'
              ElMessage.error(`${item.message}失败`)
              callback && callback(item.resolveParams)
            }
            resolve(response)
          },
          (err: any) => {
            console.log(err, '上传失败')
            ElMessage.error(`${item.message}失败`)
            reject(err)
          },
        )