1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 前端vue 配合ali-oss上传文件到阿里云

前端vue 配合ali-oss上传文件到阿里云

时间:2019-08-03 06:03:41

相关推荐

前端vue 配合ali-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可以是其他的地区简写, 具体看自己的阿里云)不需要加后面的, 它会自动拼接成完整的url

5. 上传文件

获取文件流 ===》 let file = this.$refs.fileName.files[0] 或者是原生的 document.getElementById("fileName").files[0]

获取当前选择的文件名 ===》letval=this.$refs.fileName.value 或者是原生的document.getElementById("fileName").value

截取文件后缀名 ==》 letsuffix=val.substr(val.indexOf(".")); /letsuffix=val.substring(val.indexOf("."));

使用当前时间拼接完整的文件名称 ===》 letstoreAs =`/${_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成功,之后可以调用后端接口判断此文件是普通上传、追加上传还 是 覆盖上传 、、、、、、、弹个窗就好了

}

})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。