前端上传文件至金山云服务

之前公司文件都是用的腾讯云或阿里云的对象存储，现在有个项目甲方要使用金山云存储。在网上找了一下，暂时没有踩坑文章，现记录总结一下。

目前在项目中使用POST Object的方式上传，相关文档参考：对象存储(KS3)POST Object-金山云

获取签名

import request from '@/utils/request'

export default class CommonServer{
// 获取金山云上传签名
static getKsOssSign () {
return request({
url: ‘/common/ks_oss_sign/’,
method: ‘post’
})
}
}

封装方法

import axios from 'axios'
import moment from 'moment'

export const OSS_URL = ‘https://ks3-cn-beijing.ksyun.com/xxxx’ // 金山云上传域名

xxxx为BucketName。

// 文件扩展名提取
export const fileType = fileName => fileName.substring(fileName.lastIndexOf(’.’) + 1)

/**

• oss路径定义
• @param file
  */
  export const ossPath = file => {
  const folder = moment().format(‘YYYY-MM-DD’)
  if (file.name) {
  return admin/upload/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span>folder<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span><span class="token function">fileType</span><span class="token punctuation">(</span>file<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span>file<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">
  }
  }

/**

• 金山云上传
• @returns {Promise<unknown>}
  */
  export const ksOssUpload=file=>{
  return new Promise((resolve, reject) => {
  CommonServer.getKsOssSign().then(res => {
  const { accessid, policy, signature } = res
  const formData = new FormData()
  const key = ossPath(file)
  formData.append(‘acl’, ‘public-read’)
  formData.append(‘key’, key)
  formData.append(‘signature’, signature)
  formData.append(‘KSSAccessKeyId’, accessid)
  formData.append(‘policy’, policy)
  formData.append(‘file’, file)
  axios.post(OSS_URL, formData).then(res => {
  const { status } = res
  if (status === 200) {
  const data = {
  url: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span><span class="token constant">OSS_URL</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">,
  type: fileType(file.name)
  }
  resolve(data)
  } else {
  reject(res)
  }
  }).catch(err => {
  reject(err)
  })
  }).catch(err => { })
  })
  }

使用

const res =await ksOssUplad(file)

 
 

运行结果

获取签名

上传文件