parent
f66b3bf254
commit
30136c32f3
5 changed files with 195 additions and 4 deletions
@ -0,0 +1,150 @@ |
||||
<template> |
||||
<el-upload :disabled="uploading" |
||||
:before-upload="beforeUpload" |
||||
:on-remove="onRemove" |
||||
:on-error="uploadError" |
||||
:limit="limit" |
||||
action="" |
||||
:on-exceed="handleExceed" |
||||
:show-file-list="showFiles" |
||||
:file-list="fileList" |
||||
:http-request="handleRequest" |
||||
name="file"> |
||||
<slot name="trigger"> |
||||
<el-button size="small" |
||||
:loading="uploading">{{ uploading ? '正在上传' : '上传文件' }}</el-button> |
||||
</slot> |
||||
<div slot="tip" |
||||
class="el-upload__tip"> |
||||
<el-progress v-if="uploading" |
||||
class="upload-progress" |
||||
:stroke-width="3" |
||||
:percentage="uploadProgress"></el-progress> |
||||
<slot name="tip"> |
||||
<p>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p> |
||||
</slot> |
||||
</div> |
||||
</el-upload> |
||||
</template> |
||||
|
||||
<script> |
||||
import OSS from 'ali-oss' |
||||
import OssConfig from './config.js' |
||||
import Util from '@/libs/util' |
||||
export default { |
||||
props: { |
||||
// 最大允许上传个数 |
||||
limit: { |
||||
type: Number, |
||||
default: 1 |
||||
}, |
||||
// 单个文件最大大小(单位: Mb) |
||||
maxSize: { |
||||
type: Number, |
||||
default: 10 |
||||
}, |
||||
// 是否显示已上传文件列表 |
||||
showFileList: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
// 已上传文件列表 |
||||
fileList: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
// 是否要更新fileList（如果要使用自己的fileList，则这个值传false，一般情况不用给这个值） |
||||
changeFileList: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
// 已上传文件列表 |
||||
onRemove: { |
||||
type: Function, |
||||
default: new Function() |
||||
}, |
||||
}, |
||||
data () { |
||||
return { |
||||
client: null, |
||||
uploading: false, |
||||
uploadProgress: 0, |
||||
showFiles: this.showFileList |
||||
}; |
||||
}, |
||||
mounted () { |
||||
this.initOss() |
||||
}, |
||||
methods: { |
||||
// 初始化oss |
||||
initOss () { |
||||
this.client = new OSS(OssConfig.config) |
||||
}, |
||||
// 附件上传前 |
||||
beforeUpload (file) { |
||||
const oversize = file.size / 1024 / 1024 < this.maxSize |
||||
if (!oversize) Util.warningMsg(`请上传小于${this.maxSize}MB的附件！`) |
||||
if (oversize) { |
||||
this.$emit('beforeUpload', file) |
||||
return true |
||||
} else { |
||||
return false |
||||
} |
||||
}, |
||||
// 自定义进度条 |
||||
handleProgress (progress) { |
||||
this.uploadProgress = Number((progress * 100).toFixed(2)) |
||||
}, |
||||
// 自定义上传 |
||||
async handleRequest ({ file }) { |
||||
try { |
||||
this.uploadProgress = 0 |
||||
this.uploading = true |
||||
this.showFiles = false |
||||
// 上传到阿里云oss |
||||
const { name } = await this.client.multipartUpload(file.name, file, { |
||||
progress: this.handleProgress |
||||
}); |
||||
|
||||
this.uploading = false |
||||
const url = OssConfig.preUrl + name |
||||
this.changeFileList && this.$emit('update:fileList', [ |
||||
...this.fileList, |
||||
{ |
||||
name: name, |
||||
url |
||||
} |
||||
]) |
||||
|
||||
this.showFiles = true |
||||
this.$emit('onSuccess', { |
||||
format: Util.getFileExt(file.name), |
||||
name: file.name, |
||||
url, |
||||
size: file.size, |
||||
}) |
||||
} catch (error) { } |
||||
}, |
||||
uploadError (err, file, fileList) { |
||||
this.$message({ |
||||
message: "上传出错，请重试！", |
||||
type: "error", |
||||
center: true |
||||
}) |
||||
}, |
||||
beforeRemove (file, fileList) { |
||||
return this.$confirm(`确定移除 ${file.name}？`); |
||||
}, |
||||
handleExceed (files, fileList) { |
||||
Util.warningMsg(`当前限制选择 ${this.limit} 个文件，如需更换，请删除上一个文件再重新选择！`); |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
/deep/.upload-progress { |
||||
max-width: 300px; |
||||
margin: 10px 0; |
||||
white-space: nowrap; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,37 @@ |
||||
// 阿里云oss上传
|
||||
|
||||
import OSS from 'ali-oss' |
||||
import OssConfig from './config' |
||||
import Util from '@/libs/util' |
||||
|
||||
let client = null |
||||
// 初始化oss
|
||||
const initOss = () => { |
||||
if (!client) client = new OSS(OssConfig.config) |
||||
} |
||||
|
||||
export default { |
||||
// 上传文件
|
||||
upload(file) { |
||||
initOss() |
||||
return new Promise(async (resolve, reject) => { |
||||
try { |
||||
// 上传到阿里云oss
|
||||
const res = await client.multipartUpload(file.name, file); |
||||
resolve({ |
||||
format: Util.getFileExt(file.name), |
||||
name: file.name, |
||||
url: OssConfig.preUrl + res.name, |
||||
size: file.size, |
||||
}) |
||||
} catch (error) { |
||||
reject() |
||||
} |
||||
}) |
||||
}, |
||||
// 删除文件（传完整url，不是没有https的name，因为很多接口没有存name，只存url，所以统一使用url）
|
||||
async del(url) { |
||||
initOss() |
||||
await client.delete(url.replace(OssConfig.preUrl, '')); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue