上传文件到七牛云

注册登陆到七牛云，需要认证信息才能创建个人存储空间;
注册等步骤省略

代码

html

<el-upload
	class="upload-pic"
	:action="domain"
	:data="QiniuData"
	:on-remove="handleRemove"
	:on-error="uploadError"
	:on-success="uploadSuccess"
	:before-remove="beforeRemove"
	:before-upload="beforeAvatarUpload"
	multiple
	:limit="1"
	:on-exceed="handleExceed"
	:file-list="fileList">
	<el-button size="small" type="primary">点击上传图片</el-button>
	<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
</el-upload>
<div>
	<img class="pic-box" :src="uploadPicUrl" v-if="uploadPicUrl">
</div>
<div>{{uploadPicUrl}}</div>

data

data(){
	QiniuData: {
		key: "", //图片名字处理
		token: "" //七牛云token
	},
	domain: "http://up-z2.qiniu.com", // 七牛云的上传地址（华南区）
	qiniuaddr: "https://??????.com/", // 七牛云的图片外链地址 你的七牛云里配置有
	uploadPicUrl: "", //提交到后台图片地址
	fileList: [],
	nowTime:'',
	fileExtension:''
}

在这之前，我们需要一个token,token可以是向后台要，也可以自己生成。这里讲一下自己生成。
首先需要import一个文件，这个JS文件我直接给出了，不是我写的，注释里有copyright

/**
 * Created by guohongjun on 2018/4/18.
 * 用户相关api
 */
import CryptoJS from 'crypto-js'
/* utf.js - UTF-8 <=> UTF-16 convertion
    *
    * Copyright (C) 1999 Masanao Izumo <iz@onicos.co.jp>
    * Version: 1.0
    * LastModified: Dec 25 1999
    * This library is free. You can redistribute it and/or modify it.
    */
/*
 * Interfaces:
 * utf8 = utf16to8(utf16);
 * utf16 = utf8to16(utf8);
 */
 
function utf16to8(str) {
  var out, i, len, c;
  out = "";
  len = str.length;
  for (i = 0; i < len; i++) {
    c = str.charCodeAt(i);
    if ((c >= 0x0001) && (c <= 0x007F)) {
      out += str.charAt(i);
    } else if (c > 0x07FF) {
      out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
      out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
      out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
    } else {
      out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
      out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
    }
  }
  return out;
}
 
function utf8to16(str) {
  var out, i, len, c;
  var char2, char3;
  out = "";
  len = str.length;
  i = 0;
  while (i < len) {
    c = str.charCodeAt(i++);
    switch (c >> 4) {
      case 0:
      case 1:
      case 2:
      case 3:
      case 4:
      case 5:
      case 6:
      case 7:
        // 0xxxxxxx
        out += str.charAt(i - 1);
        break;
      case 12:
      case 13:
        // 110x xxxx 10xx xxxx
        char2 = str.charCodeAt(i++);
        out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
        break;
      case 14:
        // 1110 xxxx 10xx xxxx 10xx xxxx
        char2 = str.charCodeAt(i++);
        char3 = str.charCodeAt(i++);
        out += String.fromCharCode(((c & 0x0F) << 12) | ((char2 & 0x3F) << 6) | ((char3 & 0x3F) << 0));
        break;
    }
  }
  return out;
}
 
/*
 * Interfaces:
 * b64 = base64encode(data);
 * data = base64decode(b64);
 */
var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
var base64DecodeChars = new Array(-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,
  52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
  15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
  41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);
 
function base64encode(str) {
  var out, i, len;
  var c1, c2, c3;
  len = str.length;
  i = 0;
  out = "";
  while (i < len) {
    c1 = str.charCodeAt(i++) & 0xff;
    if (i == len) {
      out += base64EncodeChars.charAt(c1 >> 2);
      out += base64EncodeChars.charAt((c1 & 0x3) << 4);
      out += "==";
      break;
    }
    c2 = str.charCodeAt(i++);
    if (i == len) {
      out += base64EncodeChars.charAt(c1 >> 2);
      out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
      out += base64EncodeChars.charAt((c2 & 0xF) << 2);
      out += "=";
      break;
    }
    c3 = str.charCodeAt(i++);
    out += base64EncodeChars.charAt(c1 >> 2);
    out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
    out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
    out += base64EncodeChars.charAt(c3 & 0x3F);
  }
  return out;
}
 
function base64decode(str) {
  var c1, c2, c3, c4;
  var i, len, out;
  len = str.length;
  i = 0;
  out = "";
  while (i < len) {
    /* c1 */
    do {
      c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
    } while (i < len && c1 == -1);
    if (c1 == -1) break;
    /* c2 */
    do {
      c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
    } while (i < len && c2 == -1);
    if (c2 == -1) break;
    out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));
    /* c3 */
    do {
      c3 = str.charCodeAt(i++) & 0xff;
      if (c3 == 61) return out;
      c3 = base64DecodeChars[c3];
    } while (i < len && c3 == -1);
    if (c3 == -1) break;
    out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));
    /* c4 */
    do {
      c4 = str.charCodeAt(i++) & 0xff;
      if (c4 == 61) return out;
      c4 = base64DecodeChars[c4];
    } while (i < len && c4 == -1);
    if (c4 == -1) break;
    out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
  }
  return out;
}
var safe64 = function(base64) {
  base64 = base64.replace(/\+/g, "-");
  base64 = base64.replace(/\//g, "_");
  return base64;
};
 
var genUpToken = function(accessKey, secretKey, putPolicy) {
  //SETP 2
  var put_policy = JSON.stringify(putPolicy);
  //SETP 3
  var encoded = base64encode(utf16to8(put_policy));
  //SETP 4
  var hash = CryptoJS.HmacSHA1(encoded, secretKey);
  var encoded_signed = hash.toString(CryptoJS.enc.Base64);
  //SETP 5
  var upload_token = accessKey + ":" + safe64(encoded_signed) + ":" + encoded;
  return upload_token;
};
export {
  genUpToken
}

然后在你用到的地方引入
个人习惯放在static/comm下

import {genUpToken} from "../../../static/comm/qiniu/qiniuToken";

create()

		created(){
            this.nowTime = this.getDate();
            console.log(this.nowTime)
            var token;
            var policy = {};
            var bucketName = '???';//你的七牛桶名称
            var AK ='????'; //你的七牛AK
            var SK = '????';//你的七牛SK
            var deadline = Math.round(new Date().getTime() / 1000) + 3600;
            policy.scope = bucketName;
            policy.deadline = deadline;
            token=genUpToken(AK, SK, policy);
            this.QiniuData.token=token;
            console.log(this.QiniuData.token);
        },

method()

//upload的生命周期函数见element-ui官方文档 https://element.eleme.cn/#/zh-CN/component/upload#methods
			handleRemove(file, fileList) {
              this.uploadPicUrl = "";
            },
            handleExceed(files, fileList) {
              this.$message.warning(
                `当前限制选择 1 张图片，如需更换，请删除上一张图片在重新选择！`
              );
            },
            beforeAvatarUpload(file) {
              const isPNG = file.type === "image/png";
              const isJPEG = file.type === "image/jpeg";
              const isJPG = file.type === "image/jpg";
              const isLt2M = file.size / 1024 / 1024 < 2;

              if (!isPNG && !isJPEG && !isJPG) {
                this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");
                return false;
              }
              if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
                return false;
              }
              const isSize = new Promise(function(resolve, reject) {
                  let width = 100;
                  let height = 100;
                  let _URL = window.URL || window.webkitURL;         
                  let img = new Image();
                  img.onload = function() {
                  		//在这里可以获取你上传图片的宽高size 
                      console.log(`img.width:${img.width} img.height:${img.height} img.size:${file.size}`)
                      let valid = img.width >= width && img.height >= height;
                      valid ? resolve() : reject();
                  }
                  img.src = _URL.createObjectURL(file);
              }).then(() => {
                  return file;
              }, () => {
                  this.$message.error('上传的icon必须是等于或大于100*100!');
                  return Promise.reject();
              });
              console.log(this.nowTime);
              //这个this.fileExtension是文件名的后缀
              this.fileExtension = file.name.split(".").pop();
              console.log(this.fileExtension);
              //这里的key给加上了时间戳，目的是为了防止上传冲突
              this.QiniuData.key = `upload_pic_${this.nowTime}.${this.fileExtension}`;
            },
            uploadSuccess(response, file, fileList) {
              console.log(fileList);
              this.uploadPicUrl = `${this.qiniuaddr}/${response.key}`;
              console.log(this.uploadPicUrl);
              //在这里你就可以获取到上传到七牛的外链URL了
            },
            uploadError(err, file, fileList) {
              this.$message({
                message: "上传出错，请重试！",
                type: "error",
                center: true
              });
            },
            beforeRemove(file, fileList) {
              // return this.$confirm(`确定移除 ${ file.name }？`);
            },
            //以下是时间戳函数
            getDate(){
              var myDate = new Date();
              //获取当前年
              var year = myDate.getFullYear();
              //获取当前月
              var month = myDate.getMonth() + 1;
              //获取当前日
              var date = myDate.getDate();
              var h = myDate.getHours(); //获取当前小时数(0-23)
              var m = myDate.getMinutes(); //获取当前分钟数(0-59)
              var s = myDate.getSeconds();
              //获取当前时间
              var now = year + '_' + this.conver(month) + "_" + this.conver(date) + "_" + this.conver(h) + '_' + this.conver(m) + "_" + this.conver(s);
              return now;
            },
            conver(s) {
              return s < 10 ? '0' + s : s;
            },

到了这一步已经可以上传图片至七牛云了，并且外链URL也被保存下来了，data()里的this.uploadPicUrl，这就是外链了。
data()里的this.fileExtension这就是后缀，也能获取到图片的后缀名，宽高以及尺寸。有了这些数据，就可以通过接口传值给后台了。具体的接口具体自己向后台要。