vue项目中怎么使用OSS上传图片或附件

这篇文章主要介绍了vue项目中怎么使用OSS上传图片或附件，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

vue项目中使用OSS上传图片或附件

上传图片和附件这里不做区别；上传的流程都一样；

1、新建oss.js文件，封装使用oss （需要安装包ali-oss）

const OSS = require('ali-oss')const OSSConfig = {  uploadHost: 'http://xxxxx.oss-cn-shenzhen.aliyuncs.com', //OSS上传地址  ossParams: {    region: 'oss-cn-shenzhen',    success_action_status: '200', // 默认200    accessKeyId: 'LTxxxxxxxxxxxxxxxvnkD',    accessKeySecret: 'J6xxxxxxxxxxxxxxxxiuv',    bucket: 'xxxxxxxx-czx',  },}function random_string(len) {  len = len || 32  var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'  var maxPos = chars.length  var pwd = ''  for (let i = 0; i < len; i++) {    pwd += chars.charAt(Math.floor(Math.random() * maxPos))  }  return pwd}function uploadOSS(file) {  return new Promise(async (resolve, reject) => {    const fileName = `${random_string(6)}_${file.name}`    let client = new OSS({      region: OSSConfig.ossParams.region,      accessKeyId: OSSConfig.ossParams.accessKeyId,      accessKeySecret: OSSConfig.ossParams.accessKeySecret,      bucket: OSSConfig.ossParams.bucket,    })    const res = await client.multipartUpload(fileName, file)    // resolve(res)    // 或者返回如下：    resolve({        fileUrl: `${OSSConfig.uploadHost}/${fileName}`,        fileName: file.name    })  })}export { uploadOSS }

2、页面中使用oss.js

这里是对elementUI的上传组件二次封装，里面不使用组件的action上传图片和附件，使用oss上传方式；

使用封装的上传组件

          
                  
                                  
                    
{{checkIptTaskDescLen}}/200
          
                      
          
          
                      
              

效果如下

感谢你能够认真阅读完这篇文章，希望小编分享的"vue项目中怎么使用OSS上传图片或附件"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!