vue使用七牛上传文件

首先要安装qiniu-js（不知道为啥我用npm下载失败，最后用的cnpm）

npm install qiniu-js -S
 

在需要用到的组件引入

import * as qiniu from "qiniu-js";
 

因为上传七牛需要uptoken，这个找后端要就行了，下面代码中的 getQiniuToken() 是我封装的获取七牛uptoken的方法，这里自行修改为你自己的。

下面贴上七牛上传配置代码

function upload(file) {   //file是选择的文件对象return new Promise((resolve, reject) => {getQiniuToken().then((res) => {    //这是我封装的获取uptoken的方法，自行修改let uptoken = res.data;let key = new Date().getTime() + Math.random(1000) + file.name;   //这是上船后返回的文件名，这里为了避免重复，加上了时间戳和随机数var config = {useCdnDomain: true,        //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。region: qiniu.region.z0,      //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域。  我这里是华东区domain: "https://image.wedsap.com", //配置好的七牛云域名  如   https://cdn.qniyun.com/chunkSize: 100,     //每个分片的大小，单位mb，默认值3forceDirect: true    //直传还是断点续传方式，true为直传};var putExtra = {fname: file.name,    //文件原始文件名params: {},mimeType: [] || null// ...config,};var observable = qiniu.upload(file, key, uptoken, putExtra, config);observable.subscribe({next: (result) => {//主要用来展示进度},error: (err) => {//上传错误后触发console.log(err);reject(err)},complete: (result) => {//上传成功后触发。包含文件地址。console.log(result);resolve(result)},});});})
 }
 

上面的region可选址如下

qiniu.region.z0: 代表华东区域
qiniu.region.z1: 代表华北区域
qiniu.region.z2: 代表华南区域
qiniu.region.na0: 代表北美区域
qiniu.region.as0: 代表新加坡区域

更多配置请查看官方文档 https://developer.qiniu.com/kodo/sdk/1283/javascript#7

上传成功后返回的信息如下

这是文件地址，前面需要加上你在七牛配置好的七牛云域名，就是上面的domain。要注意用trim()方法去除首尾空格，因为他返回的地址包含空格，放到src里访问不了，要去除

一次传多个文件我是采用的for循环调用此方法，貌似七牛不支持一次传多文件。

菜鸡一个，不喜勿喷哈！！！！！