图片常见的储存方式
方案一:存到自己公司购买的服务器上
优点:好控制
缺点:成本高由于图片都存放到自己的服务器上,占据空间很大
各种云有专门的为图片存储提供的云服务器,我们自己的服务器只存储图片地址即可
2.开通对象存储
3.创建存储桶
4.设置cors规则4.1 在存储桶列表中,选中存储桶
4.2 在左侧的菜单中选安全管理
真正的生产环境需要单独配置具体的域名和操作方法,以下方法是按照测试环境配置
5.配置云API秘钥
服务器属于个人的,需要一定的权限才能自由上传图片,这个负责权限验证的其实就是秘钥。拥有秘钥是进行上传的基础条件。
安全提示
实际工作中,秘钥属于敏感信息,不能直接放到前端存储,容易产生安全问题,更好做法将秘钥交给后端管理,前端通过调用接口先获取秘钥,有秘钥后再进行上传操作。
图片组件准备
1、基于element上传组件,可以封装一个通用的上传组件供业务组件使用,用来把图片上传到cos中,组件有两个功能:
展示图片(初始显示图片)修改图片
前端主动发起图片上传使用的是三方的腾讯云上传接口,前端得到一个已经上传完毕的图片地址,然后把这个地址当成一个接口字段 传给我们自己的后端服务。
2、下载一个官方提供的操作cos服务的包(cos-js-sdk-v5)
3、用自己的密钥去实例化cos
<div>
<el-upload
class="avatar-uploader"
action="#" //用来指定文件要上传的地址,由于我们需要定制上传动作,这里设为#自动找本地地址
:show-file-list="false" //是否显示上传的文件列表
:http-request="handleClick" //自定义上传行为
:before-upload="beforeAvatarUpload" //上传之前的检查
/*
http-request 添加这个属性,就会覆盖默认的 action行为,做了一个自定义操作
:on-success 上传成功之后的回调,
*/
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
el-upload>
div>
template>
中山慈云数据服务有限公司版权所有