vue上传文件到阿里云oss方法 结合element-ui 中的 el-upload

阿里官方文档
1、安装依赖

cnpm install ali-oss --save
1

2、新建oss.js文件，进行封装

const OSS = require('ali-oss')
import { getOssInfo } from '@/api/oss';//获取oss上传的相关密钥接口
export default {
  /**
   * 阿里云oss sdk文件上传
    dir 上传到的文件位置
   * @param {*} file 文件流
   * @param {*} successCallback 成功回调
   * @param {*} errCallBack 失败回调
   * @param {*} bucketName 阿里云桶名（可以指定多个桶名）
   * @param {*} dir 上传文件夹路径  譬如images
   */
  bucketUpload(file, successCallback = new Function(), errCallBack = new Function(), bucketName = 'jpjmall', dir = 'image') {
    let fileName = file.name// 先获取上传要的资料签名
    getOssInfo({token:sessionStorage.getItem('token')}).then((res) => {
      if (res.status === 200) {
        let obj = res.data || {}
        let config = {}
        config.host = obj.OssUrl
        // 实例化一个上传客户端
        const client = new OSS({
          // yourRegion填写Bucket所在地域。Region填写为oss-cn-hangzhou。
          region: 'oss-cn-beijing',
          // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。）（后台接口返回）
          accessKeyId: obj.AccessKeyId,
          accessKeySecret: obj.AccessKeySecret,
          // 从STS服务获取的安全令牌（SecurityToken）。
          stsToken: obj.SecurityToken,
          // 填写Bucket名称。
          bucket: bucketName,
          endpoint: "https://oss-cn-beijing.aliyuncs.com"
        })

        try {// 为保证唯一性，可以通过uuid将文件名替换
          // let uuid = uuidv4() + fileName.substring(fileName.lastIndexOf('.'))if (dir.substring(dir.length - 1, 1) !== '/') 
          {
            dir += '/'
          } 
          const result = client.put(dir + fileName, file)
          result
            .then(res => {
              console.log(res, "返回文件名和文件地址")
              let size = file.size > 1000000 ? parseFloat(file.size / 1024 / 1024).toFixed(2) + 'M' : parseFloat(file.size / 1024).toFixed(2) + 'KB'
              successCallback({
                attachment: fileName,
                aliyunAddress: res.url,
                size: size,
                host: config.host
              })
            })
            .catch(err => {
              errCallBack(err)
            })
        } catch (e) {
          console.log(e)
        }
      } else {
        // _this.$message.warning(res.msg);
      }
    });
  }
}
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

3、vue页面调用

import ossUpload from '@/utils/oss'
1

<el-form-item label="上传pdf">
   <el-upload
       class="upload-demo"
       :file-list="fileList"
       action=""
       :http-request="handleUpload"
       :on-success="handleZipSuccess"
       accept=".pdf"
     >
       <el-button size="small" type="primary">点击上传</el-button>
       <span slot="tip" class="el-upload__tip">
         支持扩展名：.pdf
       </span>
     </el-upload>
 </el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 //手动上传的方法  
    handleUpload(op) {
      let bucketName = 'jpjmall'; // 桶名
      let dir = `doc`;
      ossUpload.bucketUpload(
        op.file,
        (res) => {
          // console.log('成功回调:',res)
          let temp = {
            name: res.attachment,
            url: res.aliyunAddress
          };
          this.host = res.host;
          op.onSuccess(temp);
        },
        (err) => {
          console.log(err);
        },
        bucketName,
        dir
      );
    },
    //上传成功的方法
    handleZipSuccess(file) {
      this.fileList = [];
        this.fileList.push({
          fileName: file.name, 
          name: file.name 
        });
      // console.log(file, '阿里云返回的文件地址和文件名称');
      this.form.fileAddressId = file.url;
      this.form.handoutName = file.name;
      this.form.handoutType = file.name.replace(/.+\./, '');
    },
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

4、上传成功后预览

<a :href="上传后的具体地址" target="_blank">pdf</a>
1