vue 文件上传至阿里云 ali-oss

在之前的开发当中都是后台处理上传，前端负责上传接口调用，涉及到直传到阿里云对象存储服务（oss），查阅了相关资料，分享出来希望能帮助到遇到这个需求的小伙伴，下面是具体的步骤。

使用oss

1.使用 npm 安装ali-oss

npm install ali-oss --save

2.写一个公用的ali-oss.js

// 引入ali-oss
let OSS = require('ali-oss')/***  [accessKeyId] {String}：通过阿里云控制台创建的AccessKey。*  [accessKeySecret] {String}：通过阿里云控制台创建的AccessSecret。*  [bucket] {String}：通过控制台或PutBucket创建的bucket。*  [region] {String}：bucket所在的区域， 默认oss-cn-hangzhou。*/
let client = new OSS({region: '',secure: true,  // secure: 配合region使用，如果指定了secure为true，则使用HTTPS访问  accessKeyId: '',accessKeySecret: '',bucket: ''
})

官网方法示例点这里

3.调用

/** 
*  上传文件，大小不能超过5GB 
* @param {string} ObjName OSS的储存路径和文件名字 
* @param {string} fileUrl 本地文件 
* @retruns Promise 
*/
export const put = async (ObjName, fileUrl) => {  try {    let result = await client.put(`${ObjName}`, fileUrl)    // ObjName为文件名字,可以只写名字，就直接储存在 bucket 的根路径，如需放在文件夹下面直接在文件名前面加上文件夹名称    return result  } catch (e) {    console.log(e)  }
}
// 上传成功之后，转换真实的地址
// 后台只需要传入文件名，回显时候同样也只是返回文件名，说做数据迁移管理时候不麻烦，反正意思就是上传出现问题都和他们无关，so，没办法，所以需要自己根据返回文件名进行转码，生成所需要的urlexport const signatureUrl= async (ObjName) => {    try {    let result = await client.signatureUrl(`${ObjName}`)    return result  } catch (e) {    console.log(e)  }
}

4.保证上传文件的唯一性，随机生成文件名

/** 
* 生成随机文件名称 
* 规则八位随机字符，加下划线连接时间戳 
*/
export const getFileNameUUID = () => {  function rx() {    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)  }  return `${+new Date()}_${rx()}${rx()}`
}

使用element的 upload 组件进行上传

Element-UI的 Upload 组件有一个 http-request 配置，可以自定义上传方法，覆盖默认的。

上传到阿里云OSS成功后，会返回文件的地址，提交给后台保存地址就可以了。

如果遇到跨域问题，请参考官网的配置

oss跨域配置

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！