1. 从服务端获取七牛云上传的token,生成token参考官方文档https://developer.qiniu.com/kodo/1208/upload-token
2. 在七牛云文档查找上传的存储区域 https://developer.qiniu.com/kodo/1671/region-endpoint-fq
在七牛云控制台找到空间管理的cdn加速域名https://portal.qiniu.com/kodo/bucket/overview?bucketName=yourBucketName
在七牛的管理控制台可以看到所属存储区域 和 域名(下面的上传代码会用到这个域名)
3.使用axios上传文件,cdn加速域名+上传成功返回的key就是图片的url地址
let fd= new FormData()
fd.append('file', file, file.name );//file是文件对象
fd.append('token', token ); //从后端获取到的token
let ajax = axios.create({withCredentials: false});
ajax({
url: 'https://upload.qiniup.com',
data: fd,
method: 'POST',
onUploadProgress: (progress)=> {
//这里可以做进度条
},
}).then((res)=>{
console.log(res)
let url = 'https://qiniu.hzbswydcm.com/' + res.data.key //https://qiniu.hzbswydcm.com/ 这个是上图二的地址
}).catch((res)=>{
console.log(res)
})
附:原生js上传文件到七牛云
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://upload.qiniup.com', true);
var formData = new FormData();
formData.append('token', token);
formData.append('file', file);
xhr.upload.addEventListener("progress", function(e) {
//做进度条
}, false);
xhr.onreadystatechange = function(response) {
if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
var res = JSON.parse(xhr.responseText);
var url = "https://qiniu.hzbswydcm.com/"+res.key
} else if (xhr.status != 200 && xhr.responseText) {
//上传出错
}
};
xhr.send(formData);
附:jquery的ajax上传文件到七牛云
let fd= new FormData()
fd.append('file', file, file.name );//file是文件对象
fd.append('token', token ); //从后端获取到的token
$.ajax({
url:"https://upload.qiniup.com",
type:'POST',
data:fd,
cache: false, //需要这个配置
contentType: false, //需要这个配置
processData: false, //需要这个配置
success:function(res){
console.log(res)
let url = 'https://qiniu.hzbswydcm.com/' + res.key
},
error:function(){
console.log('数据有误')
}
});
附: uniapp上传文件到七牛云,和上面基本一致; 微信小程序上传文件到七牛云和这个一样的
uni.uploadFile({
url: 'https://upload.qiniup.com',
filePath: file,
name: 'file',
formData: {
'token': token //上传的token,从服务端获取
},
success: (res) => {
let ures = JSON.parse(res.data)
let url = 'https://qiniu.hzbswydcm.com/' + ures.key
}
});
使用七牛SDK包(qiniu-js)上传
(前端在开发APP时不可用,会报错XMLHttpRequest是undefined)
1.先安装依赖
npm i qiniu-js
2.导入qiniu-js
import * as qiniu from 'qiniu-js'
// var qiniu = require('qiniu-js') //两种方式都可以
3.使用上传
let imgtype = ''
if (file && file.name && file.name != undefined) {
imgtype = '.' + file.name.split('.')[1]
} else {
imgtype = '.' + file.type.split('/')[1]
}
const key = Date.now() + "_" + file.size + imgtype; // 上传后文件资源名以设置的 key 为主,如果 key 为 null 或者 undefined,则文件资源名会以 hash 值作为资源名。
let config = {
useCdnDomain: true, //表示是否使用 cdn 加速域名,为布尔值,true 表示使用,默认为 false。
// region: qiniu.region.z0 // 根据具体提示修改上传地区,当为 null 或 undefined 时,自动分析上传域名区域
};
let putExtra = {};
let observable = qiniu.upload(file, key, token, putExtra, config);//上传token从服务端获取
observable.subscribe({ //内部使用的是XMLHttpRequest上传,在APP端是undefined,不支持APP
next: (res) => {
// 主要用来展示进度
let total = res.total;
console.log("进度:" + parseInt(total.percent) + "% ")
},
error: (err) => {
// 失败报错信息
console.log(err)
},
complete: (res) => {
// 接收成功后返回的信息
let url = 'http://qiniu.xxxxxxxxx.com/' + res.key //图片的url地址
console.log(url);
}
})