Vue+Element 直传阿里云OSS上传_vue上传oss太慢

1.在阿里云控制设置跨域
参考官方文档
https://www.alibabacloud.com/help/zh/doc-detail/32069.htm?spm=a2c63.p38356.b99.394.492b5738ZBBcex

2.新建fileUtils.js

let OSS = require('ali-oss');

let client = new OSS({
    accessKeyId: "",
    accessKeySecret: "",   // 你创建的Bucket时获取的
    bucket: '',  // 你创建的Bucket名称
    region: '',   //  你所购买oss服务的区域，默认oss-cn-hangzhou
    timeout:60000,//超时时间 默认60S 自行设置
});

// 上传  两种方式 multipartUpload=>分片上传  put=>整体上传
export async function multipartUpload(filePath, file) {
    // console.log(filePath)
    // console.log(file)
    try {
        // console.log(file.size)
        let result = await client.multipartUpload(filePath, file, {
            parallel: 4,// 同时请求分片数
            partSize: 1024 * 1024,// 分片大小
            // progress: function (p, cpt, res) {
            // 进度条
            //   console.log(p);
            // //   console.log(cpt);
            //   console.log(res.headers['x-oss-request-id']);
            // }
          })
        result.res.imgSize=file.size
        return result 
    } catch (err) {
        console.log(err)
    }
}

// 删除
export async function remove(filePath) {
    try {
        let result = await client.delete(filePath)
        return result
    } catch (err) {
        console.log(err)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

3、上传页面使用

import { client, multipartUpload, remove } from "../../request/fileUtils";
1

// item 图片信信息
    upLoad(item) {
      let that = this;
      var fileName = item.uid;
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      var mydate = date.getDate();
      mydate = mydate < 10 ? "0" + mydate : mydate;
      this.baseurl = "uploads/" + year + month + mydate + "/"; //上传到阿里云指定路径
      var filePath = this.baseurl + fileName;//  名字
      var file = item.raw;
      multipartUpload(filePath, file).then(result => {
        let t = result;
       console.log(result)
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18