需要安装alioss插件
父组件使用
<UpApk
@fileurl="fileurl"
:type="18"
:suffix="'ipa'"
:accept="'.ipa'"
></UpApk>
子组件
<template>
<div class="content">
<el-upload
action
:http-request="Upload"
:before-upload="beforeAvatarUpload"
:before-remove="beforeRemove"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-exceed="handleExceed"
:accept="accept"
drag
:limit="limit"
:file-list="fileList"
>
<el-button>点击上传</el-button>
</el-upload>
<el-progress
v-show="showProgress"
style="width: 360px"
:text-inside="true"
:stroke-width="15"
:percentage="progress"
></el-progress>
</div>
</template>
<script>
import OSS from "ali-oss";
import { OssInfo } from "@/api/OssUpload";//获取后台配置ali-oss
export default {
name: "upApk",
props: {
limit: {//允许上传的文件个数
type: Number,
default: 1,
},
type:{//允许上传的类型
type: Number,
default:18,
},
suffix:{//上传文件类型
type:String,
default:''
},
accept:{//校验的类型
type:String,
default:''
},
},
created(){
this.showProgress = false;
this.progress = 0;
},
data() {
return {
fileList: [], //文件列
showProgress: false, //进度条的显示
dataObj: {}, //存签名信息
progress: 0, //进度条数据
};
},
methods: {
// 文件超出个数限制时的钩子
handleExceed(files, fileList) {
this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
},
// 删除文件之前的钩子
beforeRemove(file, fileList) {
// console.log("====dele");
this.showProgress = false;
this.progress = 0;
// return this.$confirm(`确定移除 ${file.name}？`);
},
// 文件列表移除文件时的钩子
handleRemove(file, fileList) {},
// 文件上传成功时的钩子
handleSuccess(response, file, fileList) {
this.fileList = fileList;
},
//文件上传前的校验
beforeAvatarUpload(file) {
let suffix
suffix =this.suffix?this.suffix:file.name.split('.')[1]
this.$emit("getSize", file.size);
const isLt100M =
file.size / 1024 / 1024 > 10 && file.size / 1024 / 1024 < 1024;
const isLt30 = file.name.length < 30;
// 请求后台接口拿配置参数
return new Promise((resolve, reject) => {
OssInfo({
type: this.type,
suffix:suffix
})
.then((response) => {
this.dataObj = response.result; //接口返回配置参数
resolve(true);
})
.catch((err) => {
// console.log(err);
reject(false);
});
});
},
// http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现
Upload(file) {
const that = this;
async function multipartUpload() {
let temporary = file.file.name.lastIndexOf(".");
let fileNameLength = file.file.name.length;
let fileFormat = file.file.name.substring(
temporary + 1,
fileNameLength
);
let client;
//阿里云需要兼容https
const protocol = window.location.protocol;
if (protocol == "http:") {
client = new OSS({
endpoint: that.dataObj.endpoint,
accessKeyId: that.dataObj.access_key_id,
accessKeySecret: that.dataObj.access_key_secret,
bucket: that.dataObj.bucket,
stsToken: that.dataObj.sts_token,
});
} else if (protocol === "https:") {
client = new OSS({
endpoint: "https://" + that.dataObj.endpoint,
accessKeyId: that.dataObj.access_key_id,
accessKeySecret: that.dataObj.access_key_secret,
bucket: that.dataObj.bucket,
stsToken: that.dataObj.sts_token,
secure: that,
});
}
client
.multipartUpload(that.dataObj.filename, file.file, {
progress: function (p) {
//p进度条的值
// console.log(p);
that.showProgress = true;
that.progress = Math.floor(p * 100);
},
})
.then((result) => {
console.log("====ok")
that.$emit("fileurl", window.base.public_url +that.dataObj.filename);
//上传成功返回值，可针对项目需求写其他逻辑
})
.catch((err) => {
console.log("err:", err);
});
}
multipartUpload();
}
},
};
</script>
<style lang="scss">
.el-upload-list--text {
width: 360px;
}
.el-upload-dragger{
width: 100px;
height: 38px;
}
</style>
