先上代码:
//安装相关的依赖
npm install qiniu-js --save
//引用
import * as qiniu from 'qiniu-js';
Vue.use(qiniu);
// plupload 我这里是引用的cdn,最好是下载下来或是进行安装
// https://cdn.staticfile.org/plupload/2.1.9/plupload.full.min.js
<span id='pickfiles' >上传资料</span>
//初始化
Qiniu.uploader({
runtimes: 'html5,flash,html4',
browse_button: 'pickfiles',
chunk_size: '8mb',
bucket: " ",//命名空间
uptoken:this.token,
// JSON.stringify(that.token),
uptoken_url: '',//获取token的地址
unique_names: false,
save_key: false,//可以保存名字???
domain: '',//七牛云地址
get_new_uptoken: true,
auto_start: true,
// max_retries: 3,
filters: {
max_file_size: '500mb',
prevent_duplicates: false
// Specify what files to browse for
// mime_types: [
// {title : 'apk files', extensions : 'apk'} // 限定apk后缀上传格式上传
// ]
},
init: {
'FilesAdded': (up, files) => {
console.log('文件就绪', files);
this.fileName = files[0].name
},
BeforeUpload: (up, file) => {
console.log('上传之前', file);
},
UploadProgress: (up, file) => {
console.log('上传中 file',file);
console.log(file.target_name)
this.progress = file.percent + '%';
},
FileUploaded: (up, file, info) => {
console.log('文件上传完毕')
this.$toast("上传成功")
this.success = true;
this.$http.post('/uac/auth/pcb/updateMaterialUrl',{orderId:this.$route.query.id,materialUrl:this.fileName,id:this.$route.query.msgId}).then((res)=>{
console.log(res);
console.log(this.$route.query.id)
})
},
Error: (up, err, errTip) => {
console.log('上传失败', err);
this.$toast("上传失败")
},
//设置key
Key: (up, file) => {
var key = file.name
return key;
}
}
});