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);
			}
		})