vue element-ui 上传文件到七牛云

最新推荐文章于 2024-07-08 17:32:00 发布

日光不倾城

最新推荐文章于 2024-07-08 17:32:00 发布

阅读量1w

点赞数 11

分类专栏： vue 文章标签： vue element

本文链接：https://blog.csdn.net/qq_36020836/article/details/80845880

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

很多人对于上传文件还是有一定的恐惧感，作为一个前端工程师来说，好像上传就应该来后端去做，但今天，我想给大家推荐写一下自己使用vue上传文件的心得，可以使用vue就可以直接上传到七牛云，写的不好勿喷。

其实接触vue的时间并不长，以前都用的是ng,但mvvm框架学起来还是比较好学的尤其是vue有自己的ui框架 element-ui,

现在开始使用：

用别人的东西，当然要看文档了，先看看这个

这个是element-ui的文档

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

上面是vue 页面中的内容文档中有

接下来我会修改一部分内容注意了

<el-upload
              class="avatar-uploade"
              :multiple="true"
              :action="actionPath"
              accept="image/jpeg,image/gif,image/png,image/bmp"
              :before-upload="beforeAvatarUpload"
              :data="postData"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

对比处中间的变化了么

1、多了个data 这个data 就是我们要传递的参数，这个参数就是upToken值，我们需要传递给七牛云的凭证，一会儿给大家说，这个凭证怎么生成

2、 action 前加了":" 因为这里要放七牛云的地址

    actionPath:'https://upload.qiniup.com', // 放在哪里我就不说了啊

这些弄好之后接下来是重头戏了就是upToken的生成，一般都是后端给的，但是前端也可以实现，我们就在这里以前端的方法实现它后端实现的思路其实也是一样的

我在这里写了个组件名字叫qiniuToken，中间有base64加密我嫌烦就把生成token写一起了，想分开的可以分开

具体代码如下：

/**
 * 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
}

中间有es6的写法，不会的自己看看去，不难

具体引入

  import {genUpToken} from "../../common/qiniuToken";

接下来还没完成呢

我们需要生成这个token

  var token;
      var policy = {};
      var bucketName = 'zhizhuoedu';
      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.postData.token=token;

这一段代码最好写在created里或者你单独拿出来写成个组件。

接下来就是上传额

这里给大家解释一下下面代码中函数的意思

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

beforeAvatarUpload //这个函数是上传之前进行的操作，我们在这里可以限制上传文件的大小，包括类型，百度一大堆，就不多说了

 handleAvatarSuccess // 这个是上传成功后的操作，你可以打印出来file  得到的有一个key

最后根据你七牛云上绑定的域名拼接了这个key 就是你上传文件的地址了

我的是这么写的

this.imageUrl = 'http://你的域名地址.com/'+ res.key

本文纯属自己开发总结经验，有些时候前端也可以分担一部分压力，没必要全部交给后端去做，那怎么体现我们价值，写的不好勿喷，我头一次在csdn上写技术博客

注：我的地址是华北地区，action 根据自己的需求去改，不能一概而论。不懂的七牛云上有这部分的详细介绍，这里就不多说了，欢迎来看，最近在学python，会的人请指教

日光不倾城

关注

11
点赞
踩
26

收藏

觉得还不错? 一键收藏
4
评论
vue element-ui 上传文件到七牛云

很多人对于上传文件还是有一定的恐惧感，作为一个前端工程师来说，好像上传就应该来后端去做，但今天，我想给大家推荐写一下自己使用vue上传文件的心得，可以使用vue就可以直接上传到七牛云，写的不好勿喷。其实接触vue的时间并不长，以前都用的是ng,但mvvm框架学起来还是比较好学的尤其是vue有自己的ui框架 element-ui,现在开始使用：用别人的东西，当然要看文档了，先看看这个这个是elem...
复制链接

扫一扫

专栏目录