前端vue+element-ui上传图片至七牛，并返回外链URL至后台

最新推荐文章于 2024-05-24 10:55:30 发布

xch752

最新推荐文章于 2024-05-24 10:55:30 发布

阅读量2.3k

点赞数

分类专栏： vue 文章标签： vue element 上传图片七牛

本文链接：https://blog.csdn.net/weixin_43640258/article/details/99450538

版权

本文介绍了如何在Vue项目中结合Element-UI组件，实现将图片上传到七牛云存储，并获取返回的外部链接URL。文章详细讲解了上传过程，包括获取token、设置上传代码及保存外链URL。最后提到，可以通过接口将这些信息传递给后台。

摘要由CSDN通过智能技术生成

2019/08/12

上传文件到七牛云

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

代码

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: