第一步

安装模块

npm install ali-oss

第二部

在utils文件夹下新建alioss.js文件，相关配置

var OSS = require('ali-oss');
export function client() {var client = new OSS({EndPoint: 'oss.shanci.tech',//   region: 'oss.shanci.tech',accessKeyId: 'LTAI4G4Mp3f9LNiE5L3SQzfY',accessKeySecret: 'oqBS5ljgXNjendslO9VC3FQvzKzKR8',bucket: 'shanci'})  //后端提供数据return client}

html部分代码

<div class="uploader"><van-uploader v-model="fileList" :max-count="2" :after-read="afterReadIdCard" /></div>

js部分代码

import { client } from '../../../utils/alioss';

afterReadIdCard(file) {file.status ='uploading'file.message = '上传中...';let 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)); // 生成32位随机字符}let name = file.file.namevar pos = name.indexOf('.');let type =name.substr(pos);var fileName = `${Date.parse(new Date())}`+pwd+type // 文件名称（时间戳+随机字符+后缀）client().multipartUpload(fileName,file.file).then(res=>{console.log('res',res.res.requestUrls[0])let imageUrlObj ={}imageUrlObj.fileName = res.res.requestUrls[0]imageUrlObj.fileUrl = res.res.requestUrls[0]imageUrlObj.fileType = 1imageUrlObj.type = 1this.imageUrlIdCard = imageUrlObjthis.submitFile()  //调后端接口，将oss返回的数据传给后端存储倒库file.status =''file.message = '';}).catch((err) => {console.log(err)})console.log(file);},

暂时就这么多，哪里不对的，请多多指教
我是一个前端小白，刚从学校出来，代码不是很规范，敬请谅解

vue+vant(有赞)ui直传阿里oss相关推荐

web直传阿里OSS
web直传阿里OSS 推荐观看官方文档: 安装:https://help.aliyun.com/document_detail/64041.html OSS鉴权详解:https://help.aliy ...
完整记录一下Web前端直传阿里OSS大文件+采用后端临时授权传stsToken的方式
文章目录前言(可不看) 1. 简介 2. 必要了解项 2.1 资源术语 2.2 常用SDK 3. 准备工作 3.1 创建bucket 3.2 设置跨域规则 3.3 创建RAM子账户及配置权限 3.4 ...
java oss 批量传输_阿里云OSS对象存储，服务端签名后直传阿里云OSS
继续上一章文章,这次要操作的是,浏览器请求服务要到签名后直传给OSS对象存储. 1.写好服务端的方法,传给前台相应的密钥 @Resource OSSClient ossClient; @Value(& ...
微信小程序录音直传阿里云OSS并语音识别
前言如题:做一个录音文字识别功能,知识点有三个,分别是微信小程序的录音功能.录音文件直传阿里云OSS.使用阿里云的录音文件识别接口返回识别后的文字一.微信小程序录音官方文档:微信小程序全局唯一的 ...
springboot 文件服务器_Spring Boot整合阿里OSS文件储存服务器详细教程
一.准备工作开发工具idea,jdk1.8,测试工具 postman 注册阿里云服务器并创建oss储存库, 创建Spring boot空项目二. 引入pom.xml org.springframe ...
封装直传阿里云存储文件上传控件
本文目标封装一个直传阿里云OSS云存储图片上传控件控件效果图上传之前上传成功预览图片文件上传前后台及阿里云存储数据流转过程 1.前端先访问后台接口获取上传阿里云存储权限相关信息和文件编号信 ...
html5地区级联选择,【JS】vue+vant移动端地区级联选择组件
首页专栏 javascript 文章详情 0 vue+vant移动端地区级联选择组件 quanta发布于今天 08:25 写在开头:项目的框架是vue+vant,业务需求一个级联的地区选择,写完才 ...
Vue + Vant + i18n 实现国际化及语言切换
库版本 package version vue 2.6.11 vant 2.12.6 vue-i18n 8.23.0 最近一个用 react-mobile 的小型 IM App 被客户吐槽UI,所以现 ...
文件存储解决方案-云存储阿里 OSS
文件存储解决方案-云存储阿里 OSS 1.文件存储(上传)解决方案讨论 1.图解文件存储解决方案-云存储阿里 OSS 解读上图普通上传并不是分布式,也不是集群,可用性不高普通上传的分布式情况,使 ...
轻松搞定阿里OSS文件上传和图片下载
轻松搞定阿里OSS文件上传和图片下载目录 1. 阿里云oss账号准备 1.1 注册阿里云账号,并开通OSS存储服务 1.2 创建RAM子用户并使用子账户的AccessKeyId和Access ...

vue+vant(有赞)ui直传阿里oss

第一步

第二部

html部分代码

js部分代码

vue+vant(有赞)ui直传阿里oss相关推荐

最新文章

热门文章