一般我们可以把图片存储到三方云服务器上,我们自己的服务器上只存储图片地址即可,一般用到的三方云服务器(阿里云,腾讯云,七牛云)这里拿腾讯云举例
1.登录到腾讯云在对象存储里创建存储桶,这里是创建存储桶步骤
2.使用elementUI的upload组件
<template>
<div>
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:http-request="handleClick"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</div>
</template>
3.安装包 yarn cos-js-sdk-v5,引入使用
<script>
export default {
name: 'UploadImg',
data() {
return {
imageUrl: ''
}
},
methods: {
//这里是上传的图片的格式大小,可自行设置
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 isJPG && isLt2M
},
handleClick({ file }) {
//引入安装得包
var COS = require('cos-js-sdk-v5')
var cos = new COS({
//这里是腾讯云里面存储桶的id和key,一定要和腾讯云生成的密钥对应
SecretId: 'AKIDKWWHo6A0d2D9rKYXHn5B2e193h6GBsLe',
SecretKey: '7zd2GG1WmnZ6ORFsITQBiz3tUqwnPnxs'
})
cos.putObject(
{
Bucket: 'lich999-1307971613' /*存储桶的名字 必须 */,
Region: 'ap-nanjing' /* 存储桶所在地域,必须字段 */,
Key: file.name /* 必须 /* 文件名 */,
StorageClass: 'STANDARD', // 上传模式, 标准模式
Body: file, // 上传文件对象
onProgress: function(progressData) {
console.log(JSON.stringify(progressData))
}
},
(err, data) => {
console.log(err || data)
//这里将云服务器上图片的地址赋值给imageUrl,可在页面显示要上传的图片
this.imageUrl = 'https://' + data.Location
}
)
}
}
}
</script>