- 考虑服务器的上传速度,包括视频图片上传时的体验,在多方参考下还是选择直传oss,不为别的,就是想让用户体验的好(👌)
- 改造第一步
-
signature 后端接口的oss基本参数
- 看下自己有没有安装ali-oss 没安装 (安装过请忽略)
- 首先到阿里云上面开通oss服务 (自己用就开通,公司用一般是技术主管选型)
- 安装ali-oss包,vue项目根目录下执行命令- - -‘npm install ali-oss --save’
安装ali-oss包,并记录到package.json文件- - -开发环境(devDependencies)和生产环境(dependencies)都需要安装这个依赖包 (–save -dev的表示只有开发环境安装依赖包)
-
安装完成后,script中导入ali-oss包- - -“import OSS from ‘ali-oss’”
-
安装并引入之后进行改装组件
<template> <div class="component-upload-image"> <el-upload name="file" :action="baseUrl" :list-type="type" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload" :limit="limit" :data="dataObj" :on-error="handleUploadError" :on-exceed="handleExceed" ref="imageUpload" :on-remove="handleDelete" :show-file-list="true" :headers="headers" :file-list="fileList" :on-preview="handlePictureCardPreview" :class="{hide: this.fileList.length >= this.limit}" > <i class="el-icon-plus" v-if="type"></i> <el-button size="small" type="primary" v-else>点击上传</el-button> </el-upload> <!-- 上传提示 --> <div class="el-upload__tip" slot="tip" v-if="showTip"> <template v-if="fileSize"> <!-- 建议尺寸 --> <!-- <b style="color: #f56c6c">{{fileDim}}</b> --> <!-- 像素 --> 大小不超过 <b style="color: #f56c6c">{{ signatureData.size }}MB</b> </template>的文件 </div> <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body > <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" /> </el-dialog> </div> </template>
只要关心两点就行( :action="baseUrl") 绑定值 绑定你最终要上传到的oss地址 一般是请求后端接口返回给的数据对象中包含,(:data="dataObj") 上传oss要携带身份参数及文件名称
-
// 上传前loading加载 async handleBeforeUpload(file) { let isImg = false; if (this.fileType.length) { let fileExtension = ""; if (file.name.lastIndexOf(".") > -1) { fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); console.log(file.name); } isImg = this.fileType.some(type => { if (file.type.indexOf(type) > -1) return true; if (fileExtension && fileExtension.indexOf(type) > -1) return true; return false; }); console.log(isImg); } else { isImg = file.type.indexOf("image") > -1; } if (!isImg) { this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`); return false; } if (this.signatureData.size) { const isLt = file.size / 1024 / 1024 < this.signatureData.size; if (!isLt) { this.$modal.msgError(`文件大小不能超过 ${this.signatureData.size} MB!`); return false; } } this.baseUrl=this.signatureData.host this.dataObj= { key : this.signatureData.dir+file.name, policy: this.signatureData.policy, OSSAccessKeyId:this.signatureData.access_id, success_action_status : '200', //让服务端返回200,不然,默认会返回204 // callback : "callbackbody", signature: this.signatureData.signature, }; // //获取OSS签名 this.$modal.loading("正在上传,请稍候..."); this.number++; },
-
this.baseUrl=this.signatureData.host
this.dataObj= {
key : this.signatureData.dir+file.name,
policy: this.signatureData.policy,
OSSAccessKeyId:this.signatureData.access_id,
success_action_status : '200', //让服务端返回200,不然,默认会返回204
// callback : "callbackbody",
signature: this.signatureData.signature,
};
以上两段代码是上传时需要的地址和参数 这里的key要进行拼接是☞要上传到的oss地址
this.signatureData这个对象 我是当作参数在父组件传进来的, -
以上就是前端改造全部过程 细节可参考上传组件,
-
不喜勿喷哈
el-upload上传改为 oss直传全步骤
于 2024-01-03 11:34:19 首次发布
本文介绍了如何在Vue项目中为了提供更好的用户体验,选择阿里OSS进行视频和图片的直接上传。步骤包括开通OSS服务、安装ali-oss包、配置上传组件,以及处理文件类型和大小验证等细节。
摘要由CSDN通过智能技术生成