上传图片
写项目时,上传的图片如果过多,太占内存,所以可以利用腾讯云或七牛云之类的,创建一个单独的地方,存放涉及到的图片
下面利用腾讯云举例,并使用element ui的上传组件,完成上传图片的功能
1.腾讯云存储桶
2.安装SDK
第一种:script 标签引用 SDK
<script src="https://unpkg.com/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script>
第二种:webpack 引入方式
通过npm i cos-js-sdk-v5 --save
安装 SDK 依赖,支持 webpack 打包的场景,您可以用 npm 引入作为模块
var COS = require('cos-js-sdk-v5');
3.上传图片
<template>
<div>
// element ui上传组件
<el-upload
list-type="picture-card"
:limit="3"
action="#"
// 上传列表
:file-list="fileList"
// 预览图片
:on-preview="preview"
// 覆盖默认的上传行为,可以自定义上传的实现
:http-request="upload"
// 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
:on-change="change"
// 接受上传的文件类型(thumbnail-mode 模式下此参数无效)
:accept="typeList"
// 上传文件之前的钩子
:before-upload="beforeUpload"
// 文件列表移除文件时的钩子
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
// 进度条
<el-progress
v-if="showPercent"
style="width: 180px"
:percentage="percent"
/>
// 预览图片时的对话框
<el-dialog title="图片" :visible.sync="showDialog">
<img :src="imgUrl" style="width: 100%" alt="" />
</el-dialog>
<!-- <el-button type="primary" plain>上传图片</el-button> -->
</div>
</template>
<script>
// 引入SDK
import COS from 'cos-js-sdk-v5'
// 自己的API密钥
const cos = new COS({
SecretId: 'AKIDoRr31kFVWIq9D3e07ze4FBsLaaLr8B1e',
SecretKey: 'VlvrZ3IH1VklX4LNFvNaYHl00kGWXJq8'
})
export default {
data() {
return {
fileList: [], // 图片地址设置为数组
showDialog: false, // 控制显示弹层
imgUrl: '', // 图片地址
currentImgId: null,
typeList: 'image/*', // 上传的文件类型
showPercent: false, // 进度条显示与否
percent: 0 // 进度条的值
}
},
methods: {
// 进行上传操作
upload(params) {
// 保存下上传图片的uid(uid是唯一的)
this.currentImgId = params.file.uid
if (params.file) {
// 执行上传操作
cos.putObject({
Bucket: 'img-1305906838', // 存储桶
Region: 'ap-nanjing', // 地域
Key: params.file.name, // 文件名
Body: params.file, // 要上传的文件对象
StorageClass: 'STANDARD', // 上传的模式类型 直接默认 标准模式即可
// 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件 格式 名称 回调
// 进度条
onProgress: (params) => {
this.percent = params.percent * 100
}
}, (err, data) => {
// data返回数据之后 应该如何处理
if (err) return
//循环上传的所有图片
this.fileList = this.fileList.map(item => {
//当其中一个的uid与当前上传的图片的uid匹配
if (item.uid === this.currentImgId) {
//将图片的地址转化成在线地址(开始是本机地址)
return { url: 'http://' + data.Location, name: item.name }
}
// 隐藏进度条
this.showPercent = false
return item
})
})
}
},
// 预览图片
preview(file) {
// 获取到被点击图片的地址
this.imgUrl = file.url
// 显示展示图片的对话框
this.showDialog = true
},
change(file, fileList) {
// 参数 fileList 存储了所有上传的图片的信息
// 每上传一次图片,参数fileList的值都会更改
// 将已上传的所有图片信息赋给fileList变量
this.fileList = fileList
},
beforeUpload(file) {
// 要开始做文件上传的检查了
// 文件类型 文件大小
const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
if (!types.includes(file.type)) {
this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!')
return false
}
// 检查大小
const maxSize = 5 * 1024 * 1024
if (maxSize < file.size) {
this.$message.error('图片大小最大不能超过5M')
return false
}
// file.uid
this.currentImgId = file.uid // 记住当前的uid
this.showPercent = true
return true
},
// 删除图片
handleRemove(file) {
// file是点击删除的文件
// 将原来的文件给排除掉了 剩下的就是最新的数组了
this.fileList = this.fileList.filter(item => item.uid !== file.uid)
cos.deleteObject({
Bucket: 'img-1305906838', // 存储桶
Region: 'ap-nanjing', // 地域
Key: file.name
}, (err, data) => {
if (err) {
this.$message.success(err)
} else if (data) {
this.$message.success('删除成功')
}
// data返回数据之后 应该如何处理
})
}
}
}
</script>