vue+element直传ali-oss的引入问题

本文描述了在使用Vue进行项目开发时,遇到的前端直传阿里云OSS的问题。在本地测试正常的情况下,发布后出现SDK报错。通过调整引入方式,从npm导入改为require引入,解决了与Vue路由的冲突,实现页面跳转。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近做项目,用到前端vue直传oss的功能,本来也没有什么难度,但是本地测试ok,build后发布到测试机就出现问题了,oss的sdk报错,蒙了,请求各路大神一通解答,未果,后端同事上报阿里的公单也是急忙没有解决,经过一个周天休息,周一终于有方案了,很简单。。。。。

报错如下:报错信息

解决方案:ali-oss本身已经build过,前端项目两次build可能会出问题,直接在项目中引入oss的sdk,在组件中直接new OSS即可。

不能直接npm i ali-oss,之前也是遇到坑,import oss from 'ali-oss',直接就和vue的路由冲突了,导致上传页面没法跳转,最后看ali官网,改为require引入,vue路由才可以跳转。

Vue.js 和 Element UI 结合可以方便地构建用户界面,Element UI 的 `el-upload` 组件恰好提供了一个现成的解决方案来处理文件上传,包括阿里云 OSS(Object Storage Service)。以下是使用 `el-upload` 实现阿里云OSS文件上传的基本步骤: 1. **安装依赖**: 首先,在 Vue 项目中安装 `ali-oss` 和 `axios`,它们分别是阿里云OSS的官方客户端库和用于发送HTTP请求的库: ``` npm install ali-oss axios ``` 2. **配置阿里云OSS**: 在你的项目中创建一个 `.env` 或者使用配置文件,添加阿里云访问信息,如 Access Key、Secret Key 和 bucket名称等: ```ini # .env or config.js ALI_OSS_ACCESS_KEY_ID=your_access_key_id ALI_OSS_SECRET_ACCESS_KEY=your_secret_access_key ALI_OSS_BUCKET_NAME=your_bucket_name ``` 3. **初始化OSS实例**: 在你的 Vue 组件里,导入必要的库,并使用环境变量初始化一个 OSS 对象: ```javascript import OSS from &#39;ali-oss&#39;; const ossClient = new OSS({ accessKeyId: process.env.ALI_OSS_ACCESS_KEY_ID, secretAccessKey: process.env.ALI_OSS_SECRET_ACCESS_KEY, endpoint: &#39;http://oss-cn-hangzhou.aliyuncs.com&#39;, // 使用你所在区域的endpoint }); ``` 4. **`el-upload` 组件配置**: 将 `el-upload` 组件设置好,监听 `onSuccess` 事件并处理上传后的回调: ```html <template> <el-upload :action="uploadUrl" :on-success="handleSuccess" :before-upload="beforeUpload" ref="upload" multiple > <i class="el-icon-upload"></i> Click to Upload </el-upload> </template> <script> export default { data() { return { uploadUrl: &#39;&#39;, // 这里需要拼接完整的上传URL,比如ossClient.putFile方法的结果 // 其他可能用到的变量 }; }, methods: { handleSuccess(response, file) { console.log(&#39;文件 &#39; + file.name + &#39; 上传成功&#39;); ossClient.signURL(file.name).then(url => this.uploadUrl = url); // 获取上传OSS的短链接 }, beforeUpload(file) { if (file.size > 1024 * 1024 * 5) { // 设置最大文件大小限制 message.error(&#39;File size exceeds the limit!&#39;); return false; } return true; }, }, }; </script> ``` 5. **完整上传流程**: - 当用户选择文件后,组件会触发 `beforeUpload` 函数验证文件是否合法; - 如果合法,发起上传请求到 `uploadUrl`(通常由后端生成,这里仅作示例); - 文件上传成功后,`handleSuccess` 会被调用,获取上传成功的 URL 并更新到页面上。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值