安装ali-oss cnpm install --save ali-oss
页面
//上传按钮
<a-row type="flex" align="middle">
<a-col>
<a-button type="primary" @click="upload">
<input
type="file"
style="display: none"
@change="changeImage()"
name="upload_file"
ref="avatarInput"
/>
<a-icon type="upload" />上传</a-button
>
</a-col>
</a-row>
// 显示上传后的地址
<div class="mt">
<a-input placeholder="地址" v-model="inputVal" style="width: 600px" />
</div>
接口请求
<script>
import { uploadApk } from "@/services/appinfo"; //引入接口地址
import OSS from "ali-oss";// 引入插件
export default {
name: "publicService",
data() {
return {
inputVal: "",
loading: false,
};
},
mounted() {},
methods: {
upload() {
// 触发上传图片按钮
this.$refs.avatarInput.dispatchEvent(new MouseEvent("click"));
},
//上传事件
changeImage() {
let files = document.getElementById("upload").files;
this.setUploadFile(files[0]);
},
setUploadFile(file) {
var that = this;
that.loading = true
var data = {
userId: this.$store.state.account.user.id,
token: this.$store.state.account.permissions,
};
getApkInfo(data).then((res) => {
if (res.data.code == 200) {
var client = new OSS({
region: "oss-cn-shenzhen",
accessKeyId: res.data.data.accessKeyId,
accessKeySecret: res.data.data.accessKeySecret,
// stsToken: "",
bucket: res.data.data.bucketName,
secure: true,
});
console.log(client);
let path = "apk/" + file.name;
client.put(path, file).then((res) => {
console.log(res.url);
that.loading = false
if (res.url) {
that.$message.success("上传成功");
that.inputVal = "域名/" + path;
}else{
that.$refs.avatarInput.value = null;
}
});
}
});
},
},
};
</script>