148 lines
4.0 KiB
Vue
148 lines
4.0 KiB
Vue
<template>
|
||
<div>
|
||
<el-upload
|
||
accept=".png, .jpg"
|
||
:action="useOss ? ossUploadUrl : minioUploadUrl"
|
||
:data="useOss ? dataObj : null"
|
||
list-type="picture"
|
||
:multiple="false"
|
||
:show-file-list="showFileList"
|
||
:file-list="fileList"
|
||
:before-upload="beforeUpload"
|
||
:on-remove="handleRemove"
|
||
:on-success="handleUploadSuccess"
|
||
:on-preview="handlePreview"
|
||
>
|
||
<el-button size="small" type="primary">{{ text }}</el-button>
|
||
<div slot="tip" class="el-upload__tip" v-if="flag">
|
||
只能上传jpg/png文件，且不超过10MB
|
||
</div>
|
||
</el-upload>
|
||
<el-dialog :visible.sync="dialogVisible">
|
||
<img width="100%" :src="fileList[0].url" alt="" />
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { policy } from '@/api/oss';
|
||
|
||
export default {
|
||
name: 'singleUpload',
|
||
props: {
|
||
value: String,
|
||
text: {
|
||
type: String,
|
||
default: '点击上传'
|
||
},
|
||
flag: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
computed: {
|
||
imageUrl() {
|
||
return this.value;
|
||
},
|
||
imageName() {
|
||
if (this.value != null && this.value !== '') {
|
||
return this.value.substr(this.value.lastIndexOf('/') + 1);
|
||
} else {
|
||
return null;
|
||
}
|
||
},
|
||
fileList() {
|
||
return [
|
||
{
|
||
name: this.imageName,
|
||
url: this.imageUrl
|
||
}
|
||
];
|
||
},
|
||
showFileList: {
|
||
get: function() {
|
||
return (
|
||
this.value !== null && this.value !== '' && this.value !== undefined
|
||
);
|
||
},
|
||
set: function(newValue) {}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
dataObj: {
|
||
policy: '',
|
||
signature: '',
|
||
key: '',
|
||
ossaccessKeyId: '',
|
||
dir: '',
|
||
host: ''
|
||
// callback:'',
|
||
},
|
||
dialogVisible: false,
|
||
useOss: false, //使用oss->true;使用MinIO->false
|
||
ossUploadUrl: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com',
|
||
// minioUploadUrl: 'http://192.168.99.239:1818/minio/upload'
|
||
minioUploadUrl: process.env.VUE_APP_BASE_API + '/minio/upload'
|
||
};
|
||
},
|
||
methods: {
|
||
emitInput(val) {
|
||
this.$emit('input', val);
|
||
},
|
||
handleRemove(file, fileList) {
|
||
this.emitInput('');
|
||
},
|
||
handlePreview(file) {
|
||
this.dialogVisible = true;
|
||
},
|
||
beforeUpload(file) {
|
||
// const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);
|
||
// const whiteList = ['pdf', 'doc', 'docx', 'xls', 'xlsx'];
|
||
// if (whiteList.indexOf(fileSuffix) === -1) {
|
||
// this.$msg('上传文件只能是 pdf、doc、docx、xls、xlsx格式', 'error');
|
||
// return false;
|
||
// }
|
||
// const isLt2M = file.size / 1024 / 1024 < 2;
|
||
// if (!isLt2M) {
|
||
// this.$msg('上传文件大小不能超过 2MB', 'error');
|
||
// return false;
|
||
// }
|
||
let _self = this;
|
||
if (!this.useOss) {
|
||
//不使用oss不需要获取策略
|
||
return true;
|
||
}
|
||
return new Promise((resolve, reject) => {
|
||
policy()
|
||
.then(response => {
|
||
_self.dataObj.policy = response.data.policy;
|
||
_self.dataObj.signature = response.data.signature;
|
||
_self.dataObj.ossaccessKeyId = response.data.accessKeyId;
|
||
_self.dataObj.key = response.data.dir + '/${filename}';
|
||
_self.dataObj.dir = response.data.dir;
|
||
_self.dataObj.host = response.data.host;
|
||
// _self.dataObj.callback = response.data.callback;
|
||
resolve(true);
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
reject(false);
|
||
});
|
||
});
|
||
},
|
||
handleUploadSuccess(res, file) {
|
||
this.showFileList = true;
|
||
this.fileList.pop();
|
||
let url = this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name;
|
||
if (!this.useOss) {
|
||
//不使用oss直接获取图片路径
|
||
url = res.data.url;
|
||
}
|
||
this.fileList.push({ name: file.name, url: url });
|
||
this.emitInput(this.fileList[0].url);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style></style>
|