锐客网

  1. 首页 > it技术 > >

vue|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', // 默认200accessKeyId: 'LTxxxxxxxxxxxxxxxvnkD',accessKeySecret: 'J6xxxxxxxxxxxxxxxxiuv',bucket: 'xxxxxxxx-czx',},}function random_string(len) {len = len || 32var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'var maxPos = chars.lengthvar 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上传方式；
::v-deep .el-upload,.el-upload--picture-card {// width: 50px; height: 0px; border: none; line-height: 0; display: block; background: #f5f6fb; }.el-upload {width: 50px; }.img-cont {width: 50px; height: 24px; background: #f5f6fb; .img-icon {color: #ccc; }.img-text {font-size: 12px; height: 24px; color: #000; }}

使用封装的上传组件
vue|vue 使用OSS上传图片或附件讲解
文章图片

效果如下
vue|vue 使用OSS上传图片或附件讲解
文章图片

【vue|vue 使用OSS上传图片或附件讲解】到此这篇关于vue 使用OSS上传图片或附件讲解的文章就介绍到这了,更多相关vue 使用OSS上传图片或附件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

    推荐阅读


    上一篇：Spring|Spring IOC源码剖析_如何整体认知Spring体系结构

    下一篇：利用c++写一个简单的推箱子小游戏