前端vue 配合ali-oss上传文件到阿里云
1. 安装ali-ossnpm i ali-oss -D (安装到生产依赖)2.引入const OSS = require("ali-oss");3.调用接口获取阿里云OSS的region、accessKeyId、accessKeySecret、bucket以及要存放的文件夹名称(就是下面第五步中使用当前时间拼接完整的文件名称的filePath)4.使用let client = new OSS({
1. 安装ali-oss
npm i ali-oss -D (安装到生产依赖)
2.引入
const OSS = require("ali-oss");
3.调用接口获取阿里云OSS的region、accessKeyId、accessKeySecret、bucket以及要存放的文件夹名称(就是下面第五步中使用当前时间拼接完整的文件名称的filePath)
4.使用
let client = new OSS({
region: region,
accessKeyId: accessKeyId,
accessKeySecret: accessKeySecret,
bucket: bucket
});
注意点: region 为 "oss-cn-hangzhou" (后面的hangzhou可以是其他的地区简写, 具体看自己的阿里云)不需要加后面的aliyun.com, 它会自动拼接成完整的url
5. 上传文件
获取文件流 ===》 let file = this.$refs.fileName.files[0] 或者是原生的 document.getElementById("fileName").files[0]
获取当前选择的文件名 ===》 let val = this.$refs.fileName.value 或者是原生的document.getElementById("fileName").value
截取文件后缀名 ==》 let suffix = val.substr(val.indexOf(".")); / let suffix = val.substring(val.indexOf("."));
使用当前时间拼接完整的文件名称 ===》 let storeAs = `/${_confValue.filePath}/${this.timestamp()}${suffix}`;
最后调用multipartUpload方法即可完成上传: storeAs是完整的文件名称包括在哪个文件夹下main,file是将要上传的文件流
client
.multipartUpload(storeAs, file)
.then(result => {
let _res = result.res;
if (_res.status === 200 && _res.statusCode === 200) {
这里是指文件上传到阿里OSS成功,之后可以调用后端接口判断此文件是普通上传、追加上传还 是 覆盖上传 、、、、、、、弹个窗就好了
}
})
更多推荐
所有评论(0)