分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

vue2上传图片到OSS

发布时间:2023-09-06 02:05责任编辑:胡小海关键词:上传图片

第一步:安装阿里云OSS

<!-- 引入在线资源 --><script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script>
<!-- 引入本地资源 --><script src="./aliyun-oss-sdk-x.x.x.min.js"></script>

注意:

  • x.x.x代表版本号,具体版本信息可在这访问查看
  • 引入在线资源方式依赖于CDN服务器的稳定性,推荐用户使用离线方式引入,即通过本地资源或自行构建的方式

也可使用npm安装SDK

npm install ali-oss

第二步:安装完成后使用

可使用 import 或 require 进行引用。

region,accessKeyId,stsToken,bucket需要后端同事提供接口获取,其中region是阿里云所在区域,登录阿里云右上角能查看,例如“oss-cn-hangzhou”,bucket是阿里云仓库的名称

let OSS = require(‘ali-oss‘);let client = new OSS({ ?region: ‘<oss region>‘,
 accessKeyId:‘your accessKeyId‘,
 stsToken:‘your stsToken‘,
 bucket:‘your bucket name‘
});

第三步:上传

your_route是你要上传文件夹的路径,后端同事可以返给你也可以自己拼接,我这里是自己拼接的,比如你的bucket下有个文件夹叫pc,你要上传到pc这个文件夹下,your_route就是‘/pc/’,file是你的上传的file
其中分片上传如果图片大于100k,返回的路径最后会自动带一个?uploadId=***********之类的参数,我在这里是自己截取处理了一下
          //文件名 ???????????????????const storeAs = ‘your_routte‘ + file.name; ??????????????????????client.multipartUpload(storeAs, file, { ???????????????????}).then(results => { ???????????????????????//console.log(results) ???????????????????????if(results.res.requestUrls[0].indexOf(‘?‘) != -1){ ???????????????????????????this.url = results.res.requestUrls[0].split(‘?‘)[0]; ???????????????????????}else{ ???????????????????????????//console.log(‘图片100k以内‘) ???????????????????????????this.url = results.res.requestUrls[0] ???????????????????????} ???????????????????????Toast(‘头像上传成功‘); ???????????????????}).catch((err) => { ???????????????????????console.log(err); ???????????????????}); 

vue2上传图片到OSS

原文地址:https://www.cnblogs.com/woshidouzia/p/9329720.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved