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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import qiniuUploader from '@/include/libs/qiniuUploader.js';
const globalUrl = process.uniEnv || {}
export default {
name: 'qiniup',
components: {},
data() {
return {
domain: 'http://upload.qiniup.com', // 七牛上传域名地址
uptokenURL: globalUrl.ucenterUrl.apiUrl + '/v1/tokens', // 上传token地址
files:[], // 上传文件
fileMaps:[], // 上传文件返回对象
keys:[], // 七牛返回key
uploadToken: '', // 上传token
maximum:999, // 最大上传数量
qiniuOptions: {}, // 七牛上传配置
};
},
created() {
this.initQiniu()
},
methods: {
initQiniu: function() {
var defaulfs = {
// bucket所在区域，这里是华北区。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
region: 'ECN',
bucket: 'fa-cms',
qiniuBucketURLPrefix: 'uploads',
// 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
// 由其他程序生成七牛云uptoken，然后直接写入uptoken
uptoken: '',
// 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
uptokenURL: this.uptokenURL,
// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
uptokenFunc: function() {
},
// bucket 外链域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
domain: this.domain,
// qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
// 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
// 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
// 通过fileURL下载文件时，自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
shouldUseQiniuFileName: true
};
let options = {}
if(Object.keys(this.qiniuOptions).length) {
Object.assign(options, defaulfs, this.qiniuOptions);
} else {
options = defaulfs;
}
// 将七牛云相关配置初始化进本sdk
qiniuUploader.init(options);
},
getUrlKey(file) {
let index = file.lastIndexOf('/');
let len = file.length
let name = file.substring(index + 1, len)
return name;
},
/**
* 确认上传
* @param {boolean} submit
*/
confirmUpload(submit = false) {
let self = this
const fileList = self.files
if (self.maximum - fileList.length <= 0) {
uni.showToast({
title: '图片数量不能大于' + self.maximum,
icon: 'none'
})
return
}
for (let file of fileList) {
let name = self.getUrlKey(file)
// 交给七牛上传
let item = {
src: '',
id: '',
key:'',
// filesize: '',
progress: 0
}
const params = {
name:name,
file:file,
}
qiniuUploader.upload(params, (res) => {
let inLen = self.maximum - fileList.length
if (inLen > 0) {
item.src = file
item.key = res.url
self.fileMaps.push(item);
self.keys.push(item.key)
if(submit) {
self.submitFile()
}
} else {
uni.showToast({
title: '图片数量不能大于9'
})
}
}, (error) => {
console.log('error: ' + error);
}, null, (res) => {
item.progress = res.progress
}, () => {
// 取消上传
}, () => {
// `before` 上传前执行的操作
}, (err) => {
// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
});
}
}
}
}