图片上传到阿里云oss,
Posted yadi001
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片上传到阿里云oss,相关的知识，希望对你有一定的参考价值。
<el-upload :disabled="upLoading" :limit="12" action :http-request="uploadHttp" :show-file-list="false" accept=".png, .jpg, .jpeg">
<div>
<i v-if="!upLoading" class="el-icon-plus"></i>
<span v-if="upLoading" style="font-size: 14px;"> <i class="el-icon-loading"></i>上传中 </span>
</div>
</el-upload>
<viewer :images="fileList">
<div v-for="(item, index) in fileList" :key="‘key‘ + index">
<div @click.stop="handleDeleteImg(item, index)" >
<i class="el-icon-error"></i>
</div>
<img :src="item.url" />
</div>
</viewer>
<script>
var OSS = require(‘ali-oss‘)
export default {
data() {
return {
loading: false,
ossClient: null, //阿里云上传初始化
ossConfig: {
region: ‘‘,
accessKeyId: ‘‘,
accessKeySecret: ‘‘,
bucket: ‘‘,
stsToken: ‘‘,
upload_path: ‘‘,
secure: true //配置是否为https请求true为https,false为http
},
upLoading: false, //图片上传
upFileUrl: ‘‘,
currentFileUrl: ‘‘, //图片地址简称
fileList: [],
}
methods: {
initPage() {
this.$http(this.GLOBALApi.initBrandSettled(), {}).then(res => {
if (res.status == 1) {
if (res.data) {
this.form.nickName = res.data.nickName
this.form.wechatName = res.data.wechatName
this.form.remark = res.data.remark
this.form.id = res.data.id
this.form.wechatCode = res.data.wechatCode
if (res.data.wechatCode) {
this.upFileUrl = res.data.wechatCode
this.currentFileUrl = res.data.url + res.data.wechatCode
this.fileList = [{ name: res.data.url + res.data.wechatCode, url: res.data.url + res.data.wechatCode }]
}
}
}
})
},
handleDeleteImg(item, index) {
this.currentFileUrl = ‘‘
this.upFileUrl = ‘‘
this.fileList.splice(index, 1)
},
uploadHttp({ file, data }) {
//mpeg safari浏览器ile.type为mpeg
let typeArray = file.type.split(‘/‘)
let fileType = typeArray[1]
let typeReg = ‘png,jgp,jpeg‘ //限制上传格式
if (typeReg.indexOf(fileType) < 0) {
this.$message.warning(‘上传文件格式仅限png,jgp，请重新选择‘)
return false
}
this.$http(this.GLOBALApi.gradeStsToken(), {}).then(res => {
if (res.status == 1) {
let fileName = this.$store.state.filePrefix + ‘system/‘ + new Date().getTime() + ‘-‘ + Math.floor(Math.random() * 10) + ‘.‘ + fileType //定义唯一的文件名,上传到oss的文件命名 时间戳(毫秒)+0-9的一位随机数+后缀名
this.upLoading = true
this.ossConfig.region = res.data.region
this.ossConfig.accessKeyId = res.data.accessKeyId
this.ossConfig.accessKeySecret = res.data.accessKeySecret
this.ossConfig.bucket = res.data.buckedName
this.ossConfig.stsToken = res.data.securityToken
this.ossClient = new OSS(this.ossConfig)
console.log(new OSS(this.ossConfig))
this.ossClient
.multipartUpload(fileName, file, { ContentType: file.type })
.then(group => {
console.log(group)
this.upLoading = false
let imgSrc = ‘‘
if (group.res.requestUrls[0].indexOf(‘?uploadId‘) >= 0) {
//处理阿里云返回来的数据有时候会带?uploadId这个家伙
imgSrc = group.res.requestUrls[0].split(‘?uploadId‘, 1)
} else {
imgSrc = group.res.requestUrls[0]
}
this.fileList = []
this.fileList = [{ src: imgSrc, name: imgSrc, url: imgSrc }]
this.currentFileUrl = imgSrc
this.upFileUrl = fileName
this.$message.success(‘上传成功！‘)
})
.catch(error => {
this.upLoading = false
this.upFileUrl = ‘‘
this.currentFileUrl = ‘‘
})
} else {
this.$message.warning(res.error_msg)
}
})
return false
},
skuSubmit() {
if (!this.form.nickName) {
this.$message.warning(‘请输入客服昵称‘)
} else if (!this.form.wechatName) {
this.$message.warning(‘请输入微信号‘)
} else if (!this.upFileUrl) {
this.$message.warning(‘请上传微信二维码‘)
} else {
this.$http(this.GLOBALApi.brandSettled(), {
id: this.form.id,
nickName: this.form.nickName,
wechatCode: this.upFileUrl,
wechatName: this.form.wechatName,
remark: this.form.remark
}).then(res => {
if (res.status == 1) {
this.initPage()
this.$message.success(‘保存成功！‘)
} else {
this.$message.warning(res.error_msg)
}
})
}
}
}
},
</script>
以上是关于图片上传到阿里云oss,的主要内容，如果未能解决你的问题，请参考以下文章