<template>
<div>
<el-form>
<el-row>
<el-col :span="24">
<el-form-item label="商品主图:">
<img :src="man_page_up" alt="" class="uploadImg">
<!-- bucket地址,是后端配置,一般格式为 https://你的bucket名称.你的bucket地域.aliyuncs.com -->
<el-upload style="float:left;" class="avatar-uploader" :data="pageUpObj" action='bucket地址' :show-file-list="false" :on-success="uploadSuccessMasterImg" :before-upload="beforeUploadMasterImg">
<el-button style="width:130px;padding:10px;color:#FEB334;border-color:#FEB334" :disabled="canEdit">上传图片</el-button>
</el-upload>
<p class="goodtips">商品详情页主图,最多上传1张,建议长宽为420*750像素,300KB以内</p>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="详情图:">
<img :src="man_page_down" alt="" class="uploadImg">
<el-upload style="float:left;" class="avatar-uploader" :data="pageDownObj" action='bucket地址' :show-file-list="false" :on-success="uploadSuccessDetailImg" :before-upload="beforeUploadDetailImg">
<el-button style="width:130px;padding:10px;color:#FEB334;border-color:#FEB334" >上传图片</el-button>
</el-upload>
<p class="goodtips">商品详情页详情图,最多上传1张,建议宽750像素,800KB以内</p>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="缩略图:" >
<img :src="man_page_order" alt="" class="uploadImg">
<el-upload style="float:left;" class="avatar-uploader" :data="pageOrderObj" action='bucket地址' :show-file-list="false" :on-success="uploadSuccessBreviaryImg" :before-upload="beforeUploadBreviaryImg">
<el-button style="width:130px;padding:10px;color:#FEB334;border-color:#FEB334">上传图片</el-button>
</el-upload>
<p class="goodtips">下单缩略图,最多上传1张,建议长宽为160*160像素</p>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
data() {
return {
pageUpObj:{},
pageDownObj:{},
pageOrderObj:{},
man_page_up: '',
man_page_down: '',
man_page_order: '',
}
}
其实和正常的上传流程是一样的,只不过是需要先拿到oss签名,再进行上传
getOssInfo是后端写的获取oss签名的接口,返回数据格式大概如下:
methods: {
async beforeUploadMasterImg(file) {
await this.getOssSignature(file,'up')
},
async beforeUploadDetailImg(file) {
await this.getOssSignature(file,'down')
},
async beforeUploadBreviaryImg(file) {
await this.getOssSignature(file,'order')
},
/**
* oss上传图片 服务端签名直传-获取签名
*
* @return
*/
async getOssSignature(file,type){
var _self=this
// 因为向后端请求getOssInfo是异步的,我们这里同步处理就加上async 同步处理加上 await
await getOssInfo().then(response=>{
if(type=='up' && _self.beforeImgUpload(file, 300 / 1024)){
console.log(_self.beforeImgUpload(file, 300 / 1024),'你你你你你你你');
_self.pageUpObj.policy = response.data.policy //policy
_self.pageUpObj.signature = response.data.signature //签名
_self.pageUpObj.ossaccessKeyId = response.data.accessid //accessKeyId
_self.pageUpObj.key = response.data.dir + file.uid + '_' + file.name // 图片链接
_self.pageUpObj.dir = response.data.dir //存储在oss的文件路径
_self.pageUpObj.host = response.data.host //这个其实就是oss的地址,也就是组件上传中需要的action
}
if(type=='down' && _self.beforeImgUpload(file, 800 / 1024)){
_self.pageDownObj.policy = response.data.policy
_self.pageDownObj.signature = response.data.signature
_self.pageDownObj.ossaccessKeyId = response.data.accessid
_self.pageDownObj.key = response.data.dir + file.uid + '_' + file.name
_self.pageDownObj.dir = response.data.dir
_self.pageDownObj.host = response.data.host
}
if(type=='order' && _self.beforeImgUpload(file)){
_self.pageOrderObj.policy = response.data.policy
_self.pageOrderObj.signature = response.data.signature
_self.pageOrderObj.ossaccessKeyId = response.data.accessid
_self.pageOrderObj.key = response.data.dir + file.uid + '_' + file.name
_self.pageOrderObj.dir = response.data.dir
_self.pageOrderObj.host = response.data.host
}
})
},
/**
* 图片上传前 钩子函数
*
* @param {Object} file 图片详细信息
* @param {Number} limitFileSize 图片大小限制 单位MB
* @return
*/
beforeImgUpload(file, limitFileSize = 10) {
console.log(file)
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < limitFileSize;
if (!isJPG && !isPNG) {
this.$message.error("上传图片只能是 JPG、JPEG、PNG 格式!");
}
if (!isLt2M) {
this.$message.error(`上传图片大小不能超过 ${limitFileSize}MB!`);
}
return isJPG || (isPNG && isLt2M);
},
/**
* 图片上传成功 钩子函数
*
* @param
* @return
*/
uploadSuccessMasterImg(res,file) {
this.man_page_up = this.pageUpObj.host + '/' + this.pageUpObj.key
},
uploadSuccessDetailImg(res) {
this.man_page_down = this.pageDownObj.host + '/' + this.pageDownObj.key
},
uploadSuccessBreviaryImg(res) {
this.man_page_order = this.pageOrderObj.host + '/' + this.pageOrderObj.key
},
}
效果图: