vue实现图片上传到服务器,vue上传图片到阿里云并显示
对象存储是腾讯云提供的分布式存储服务，用于存储海量文件。主要介绍用vue.js上传图片的功能，有兴趣的朋友可以参考一下。
前言
提示：以下是本文的主要内容，以下案例可供参考。
一、对象存储
云对象存储(COS)是腾讯云提供的存储海量文件的分布式存储服务，具有高可扩展性、低成本、可靠安全等优势。通过控制台、API、SDK和工具，用户可以简单快捷地访问COS，上传、下载和管理多格式文件，实现海量数据存储和管理。
二、配置腾讯云Cos
1.介绍图书馆
代码如下(示例):
目标：配置一个腾讯云cos
由于班级开发的特殊性，我们不想把所有的图片都上传到自己的官方服务器上。我们在这里
可以采用腾讯云的一个图片方案。
第一步，要有一个腾讯云的开发者账号。
实名验证
接下来扫描二维码进行授权。
点击接收免费产品。
选择对象存储成本
至此，账户部分完成。接下来，我们需要创建一个存储图片的桶。
登录到对象存储控制台并创建一个存储桶。将bucket的权限设置为公共读取和私有写入。
创建存储桶
设置cors规则
AllowHeader需要配置为*，
这里设置了我们的腾讯云存储桶。
三、新建文件上传组件
安装JavaScript SDK
npm i cos-js-sdk-v5 -保存
新增上传图片组件src/components/image upload/index . vue
上传组件，我们可以效仿element的el-upload组件，采用照片墙listtype="picture-card "的模式
模板
差异
El-上传
list-type=图片卡
:limit=4
action=#
:file-list=fileList
:on-preview=preview
:http-request=upload
:on-change=change
:上传前=上传前
:accept=typeList
:on-remove=handleRemove
i class=el-icon-plus /
/El-上传
El-进展
v-if=showPercent
style=width: 180px
:percentage=“百分比”
/
El-dialog title= picture :visible . sync= showDialog
img:src= imgUrl style= width:100% alt= /
/el-dialog
/div
/模板
脚本
从“cos-js-sdk-v5”导入COS
const cos=新COS({
SecretId: xxx ，//密钥Id
SecretKey: xxx //key key
})//实例化的包已经有能力上传到这个账号的桶里了。
导出默认值{
data() {
返回{
List: []，//图片地址设置为数组
ShowDialog: false，//控制显示层。
imgUrl: ，
currentImageUid: null，
类型列表： image/* ，
ShowPercent: false，//是否显示进度条
百分比：0 //上传进度
}
},
方法：{
预览(文件){
this.imgUrl=file.url
this.showDialog=true
},
上传前(文件){
//允许上传的文件类型
const types=[image/jpeg ， image/gif ， image/bmp ， image/png]
如果(！types.includes(file.type)) {
这个。$message.error(上传的图片只能是JPG、GIF、BMP、PNG格式！)
Return false //return false将阻止图片上传。
}
const maxSize=1024 * 1024
if (file.size maxSize) {
这个。$message.error(最大图片大小不能超过1M )
返回false
}
this.currentImageUid=file.uid
this.showPercent=true
返回true
},
上传(参数){
//console.log(params.file)
if (params.file) {
//执行上传操作
cos.putObject({
桶： xxx ，//桶
地区： AP-南京，//地区
Key: params.file.name，//文件名
Body: params.file，//要上传的文件对象
存储类："标准",//上传的模式类型直接默认标准模式即可
onProgress: (progressData)={
这个。百分比=进度数据。百分比* 100
}
}，(err，data)={
//数据返回数据之后应该如何处理
如果（错误)返回
这个。文件列表=这个。文件列表。地图(项目={
如果(项。uid===这个。currentimageuid){
返回{ url: http://数据。位置，名称：item.name }
}
退货项目
})
//console.log(this.fileList)
})
}
},
手柄移除(文件，文件列表){
这个。文件列表=这个。文件列表。过滤器(item=item。uid！==file.uid)
//console.log(文件)
cos.deleteObject({
存储桶：" xxx "，/*必须*/
地区：亚太-南京,/*存储桶所在地域，必须字段*/
Key: file.name /*必须*/
}，(err，data)={
//console.log(err data)
})
},
更改（文件，文件列表){
this.fileList=fileList
}
}
}
/脚本
详述详情页引入构成部分
模板
div class=应用程序容器
电子贺卡
埃尔标签
el-tab-pane label=个人详情
用户信息/
/El-选项卡-窗格
el-tab-pane label=重置密码
！-放置表单-
埃尔格式
标签宽度= 120像素
style= margin-left:120 px；上边距：30px
El-表单-项目标签=密码：
El-input style= width:300 px type= password /
/El-表单-项目
El-表单-项目标签=确认密码：
El-input style= width:300 px type= password /
/El-表单-项目
埃尔-表单-项目
埃尔按钮类型="主要"重置/el-button
/El-表单-项目
/el格式
/El-选项卡-窗格
el-tab-pane label=部门信息
部门/
/El-选项卡-窗格
el-tab-pane label=选择头像
图片-上传/
/El-选项卡-窗格
/el-tabs
/电子名片
/div
/模板
脚本
从导入用户信息./component/Userinfo
从导入部门。/组件/部门
从" @/components/ImagUpload "导入图像上传
导出默认值({
组件：{
用户信息：用户信息，
部门：部门，
图像上传：图像上传
},
//
方法：{
上传(e) {
const file=e.target.files[0]
const reader=new FileReader()
reader.readAsDataURL(文件)
reader.onload=异步函数(e) {
等待上传({
文件：{
原始名称：“11.jpg”，
文件：电子目标。结果
}
})
}
}
}
})
/脚本
给详述页创建一个路由，因为当前写的查看是二级导航跳转所以创建路由时应该写成
从" @/布局"导入布局
导出默认值{
路径："/用户",
组件：布局，
孩子：[{
路径："索引",
组件：()=import(@/views/user/index )，
姓名：用户，
元：{
标题： 用户管理，
图标："帐户"
}
},
{
路径："详细信息",
组件：()=导入( @/视图/用户/详细信息),
名称：详细信息，
隐藏：真实，
元：{
标题： 用户详情，
图标："帐户"
}
}]
}
效果图
点击查看：
选择头像：
再看下云存储中是否已上传：
到此这篇关于vue。j云存储实现图片上传功能的文章就介绍到这了，更多相关vue。j图片上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。