图片上传三方云服务器，前端主导方案

有俩种方案

前端主导方案

后端主导方案

工作中基本都是后端主导

接下来讲下前端主导方案

这里使用 elelment ui的上传图片使用http-request 自定义上传

<template><!--上传组件: 把复杂度给屏蔽了很多东西不用自己写 只需要配置即可action: 配置上传的接口地址 必填show-file-list: 在支持多图片上传的时候是否显示图片列表on-success: 接受一个回调函数 成功回调before-upload: 接受一个回调函数 上传前校验回调 对图片的格式化大小做一些上传前的校验自定义上传的背景：上传到三方的云服务器 -> 不使用自己的服务接口而是使用三方的api -> 上传组件的默认配置虽然简单但是不够灵活 面对这种三方云服务的上传能力不够 -> 组件支持自定义上传 -> 组件只负责把图片从本地选择到 然后给你做校验 剩下的事儿完全交给我们开发者来做配置自定义上传http-request配置自定义上传 一旦配置之后 默认的action和on-success都将失效--><el-uploadclass="avatar-uploader"action="#":show-file-list="false":before-upload="beforeAvatarUpload":http-request="httpUpload"><!--img:回显功能的图片--><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><!--加号图标--><i v-else class="el-icon-plus avatar-uploader-icon" /><!--进度条 让这个组件垂直水平居中对齐交互要求：点击上传之前 进度条不显示 上传中显示 上传成功后隐藏v-if + 布尔值响应式数据--><el-progress v-if="showProgress" type="circle" :percentage="percent" class="progress" /></el-upload>
</template><script>export default {data() {return {imageUrl: ''};},methods: {handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw);},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}// 必须通过校验 return出去的是true的时候 才会正式进行上传// 否则会被拦截return isJPG && isLt2M;}}}
</script>
<style>.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.avatar-uploader .el-upload:hover {border-color: #409EFF;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}.avatar {width: 178px;height: 178px;display: block;}
</style>

配置秘钥.开发者前端主导的话通常通过接口获取到一个临时的秘钥,进行配置

<script>
//下载cos-js-sdk-v5插件并导入
const COS = require('cos-js-sdk-v5')// 实例化 传入密钥信息 注意这里仅仅是教学测试 实际开发时密钥
// 不能写在前端 需要单独调用一个我们自己的后端接口进行获取临时秘钥// 配置秘钥 然后生成独立无二的cos对象 目的是为了把图片上传到我们自己的云服务器 而不是别人的
// 要使用自己的！！！！！！
const cos = new COS({SecretId: 'xxxxxxxxx', // 身份识别IDSecretKey: 'xxxxxxxxxx' // 身份秘钥
})export default {name: 'UploadImg',props: {value: {type: String,default: ''}},data() {return {imageUrl: '',// 决定回显图片的关键字段// props中imgUrl一开始的数据为空 通过请求接口拿到数据之后又变为有值// 如果是这种写法的话 相当于一开始imgUrl的空值先交给data中的imageUrl// 这里只会赋值一次 永远都是一开始的空 并不会在变化之后重新进行赋值percent: 0,showProgress: false}},watch: {value() {// 只要传入的props中的数据发生变化 就进行手动赋值this.imageUrl = this.value}},methods: {beforeAvatarUpload(file) {const isPng = file.type === 'image/png'const isLt2M = file.size / 1024 / 1024 < 2if (!isPng) {this.$message.error('上传头像图片只能是 PNG 格式!')}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!')}// 必须通过校验 return出去的是true的时候 才会正式进行上传// 否则会被拦截return isPng && isLt2M},httpUpload(res) {console.log(res.file)// 我们自己的上传 file文件对象// 调用申请好的云服务器提供的api进行上传了// 执行上传操作this.showProgress = truecos.putObject({Bucket: 'chaichai-1305124340', /* 存储桶 */Region: 'ap-beijing', /* 存储桶所在地域，必须字段 */Key: res.file.name, /* 文件名 */StorageClass: 'STANDARD', // 上传模式, 标准模式Body: res.file, // 上传文件对象// 图片上传的过程中不断执行的回调函数 这里可以做上传进度相关的功能onProgress: (progressData) => {console.log(progressData.percent)       //可以获取到上传途中的进度// 组件 1-100  回调数据 0 - 1this.percent = Math.floor(progressData.percent * 100)}}, (err, data) => {// 上传成功或者失败都会执行这个回调console.log(err, data)// 手动拼接一个协议 https:// + 云服务器图片地址this.imageUrl = `https://${data.Location}`// 通过自定义事件的触发 把url传给父组件this.$emit('input', this.imageUrl)this.showProgress = false})}}
}
</script>

图片上传三方云服务器，前端主导方案相关推荐

微信开发图片上传阿里云 oss 服务器
在做微信开发时,我需要将图片上传至阿里云OSS,思路是服务端下载微信图片再转存至OSS. wx.chooseImage({count: 1, // 默认9sizeType: ['original', ...
moba上传文件到服务器,图片上传到远程服务器上的方法
图片上传到远程服务器上的方法内容精选换一换将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式.本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows ...
文件实时上传至云服务器的方法,文件实时上传至云服务器的方法
文件实时上传至云服务器的方法内容精选换一换裸金属服务器安装Agent后,裸金属实例出现在云监控服务管理控制台的"主机监控 > 弹性云服务器"列表中.主机监控Agent根 ...
文件上传到云服务器对象存储oos流程
两种方式: 1.通过服务器直接上传云服务器 2.网页向服务器发送请求获取云服务器签名,后直接上传到云服务器(可以降低自身服务器访问压力) 流程: 1.注册云服务器对象存储.开启跨域访问和创建阿里云的子 ...
华为服务器上传文件,云服务器上传文件方式
云服务器上传文件方式内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据传 ...
java图片上传保存至服务器并返回可下载的URL
java图片上传保存至服务器并返回可下载的URL 1.需求来源 2.解决思路 3.开始干活(直接上代码) 4.总结 1.需求来源上周要做一个功能,需求是: 微信小程序开发的程序会传一张图片到后台ja ...
html显示数据库图片django,django将图片上传数据库后在前端显式的方法
1.使用ImageField先安装pillow模块 pip install pillow 2.在app的models中设置 class Image(models.Model): pic_name=mo ...
base64格式的图片上传阿里云
base64格式的图片上传阿里云上传图片的时候,除了普通的图片上传,还有一张图片信息是以base64格式发送到后台的. 后台接受base64格式的图片,上传至阿里云代码:(主要是将base64转化成 ...
html文件已传入服务器,把html文件上传到云服务器
把html文件上传到云服务器内容精选换一换为了实现通过NAT Server可使用SSH协议跳转到SAP HANA节点的功能,以及SAP HANA节点和NAT Server互相通过SSH协议跳转的 ...

图片上传三方云服务器，前端主导方案

图片上传三方云服务器，前端主导方案相关推荐

最新文章

热门文章