前端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可以是其他的地区简写, 具体看自己的阿里云)不需要加后面的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成功，之后可以调用后端接口判断此文件是普通上传、追加上传还                      是                            覆盖上传  、、、、、、、弹个窗就好了

            }

}）