七牛云上传图片和视频

基于Vue框架使用七牛云

1. 项目中引入 qiniu-js

npm i qiniu-js -s

npm i js-base64 -s  // 引入bs64编码，文件名称可能会出现中文字符，编码后上传

// index
import * as qiniu from "qiniu-js";

在项目需要作用域中引入 bs64
let Base64 = require("js-base64").Base64

2. 上传七牛云，需要先向后台请求 token 字段。

getToken() {
      let data = {
        key: null
      };
      // 后台需要传的值，根据后台需要参数传参请求
      
      this.axios
        .post("http://mp.youkuaiyun.com/eg-api/push/upload/getToken", data)
        .then(res => {
          this.Token = res.data.data;
        });
    },

3. 上传图片和视频

// html
<input @change="upImage($event)" type="file" title />

// script

 upImage(e) {
      this.qiniuFiles(e.target.files[0]);
 },
 qiniuFiles(file){
 	  let Base64 = require("js-base64").Base64; // 引入bs64，
      let f = file; // 上传的文件，
      let key = Base64.encode(f.name); // 文件的名称可能会出现中文，用bs64编码
      let config = {
        useCdnDomain: true, // 表示是否为CDN加速，true加速；false不加速
        region: qiniu.region.z0, // 当前地区， 华东区域
        domain: "http://img.mp.youkuaiyun.com.com" // 七牛云注册的空间域名
      };
      let putExtra = {
        fname: "", // 文件原文件名
        params: {}, // 放置自定义变量
        mimeType: null // 上传文件限制，null为不限制；限制类型放在数组中['image/png',"image/gif"]
      };

      let observable = qiniu.upload(f, key, this.Token, putExtra, config);  // this.Token 为上面向后台请求token 保存字段
      observable.subscribe({
        next: resProgress => {}, // 查看上传进度条
        error: errResult => {}, // 上传失败
        complete: res => {
            this.avatar = "http://mp.youkuaiyun.com/" + res.key;
      });
 }

• 关于地区：
  qiniu.region.z0: 代表华东区域
  qiniu.region.z1: 代表华北区域
  qiniu.region.z2: 代表华南区域
  qiniu.region.na0: 代表北美区域
  qiniu.region.as0: 代表东南亚区域

• 关于七牛云更多文档可以查看 官方文档

这样一个基于Vue框架上传图片和视频的功能就实现了，只要不要限定上传类型，图片和视频是都可以上传使用的

 
 
// 一个月薪2500的狗头，只能记录+分享它的狗生了…