前端使用ElementUI上传图片到七牛云服务器

ElementUI upload组件：http://element-cn.eleme.io/#/zh-CN/component/upload

0. 目的

我们的目的是通过使用ElementUI的 upload 组件上传图片到七牛云 存储对象 上，之后拿到该图片在存储对象上的 url地址

1. ElementUI官方文档示例

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  list-type="picture">
  <el-button size="small" type="primary">点击上传el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kbdiv>
el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
script>

效果如下：

2. 参数说明

action

这个参数是七牛云的bucket域名，官方文档：点击查看

我们在这里按照自己七牛云服务器的位置填写，如在七牛云空间概览中我的存储区域为“华东”，那么翻越bucket域名文档，华东地区的客户端上传地址为http(s)://upload.qiniup.com，那这个参数应填为：

action="http://upload.qiniup.com"

data

上传时附带的额外参数，我们在这里要填写我们的七牛云token，token格式为一个json对象：

{
	token: "xxx:xxx:xxx"	// 由":"分隔开为三部分的长字符串
}

Token是根据每个存储对象独立生成的，只有把Token作为额外参数发送过去，图片才能上传到你的存储对象上。这里我们说一下Token是怎么获取的，实际上Token应该为后台生成的，这里基本有三种方法：

1. 后台编写生成Token的API供前端调用 （让后台的小伙伴去看七牛云的Token生成算法，生成后将Token返回给前端）
2. 前台自己根据算法生成Token （可能没后台那么方便，但是前端可以独立完成，但是不安全，会泄露当前存储对象的密钥）
3. 借用七牛云Token生成工具，生成一个长期Token，直接把Token放在前台调用 （这中方式很不稳定，会导致Token过期后便无法上传图片，导致应用功能无法正常使用）

以上三种方法均有利弊，第一种是正式项目中比较常规的解决方法，后两种仅供实验使用。

七牛云Token生成算法说明：https://developer.qiniu.com/kodo/manual/1208/upload-token

七牛云Token在线生成演示：http://jsfiddle.net/gh/get/extjs/4.2/icattlecoder/jsfiddle/tree/master/uptoken

生成Token需要以下几个参数

• accessKey：在七牛云-密钥管理中可查看
• secretKey：在七牛云-密钥管理中可查看
• backetName：你的存储空间列表中某一存储对象的名称
• deadLine：Token过期时间

总之拿到Token后我们便可以在data参数下设置自己的token

on-success

上传图片成功后执行的钩子函数，参数为服务器返回的相应。

上传图片后，七牛云服务器会返回我们上传的图片在七牛云服务器上的经过HASH后的名字，我们在存储对象绑定的域名后，缀上这段HASH值，就是我们图片的url，如：

uploadSuccess(res) {
  this.form.cover = "http://study.esunr.xyz/" + res.key;
  this.EncodedEntryURI = res.key;
}

其他参数可以参考ElementUI文档，再此不多赘述。

3. 完整示例

<template>
<el-form>
	<el-form-item label="上传封面">
		<el-upload
		   action="http://upload.qiniup.com"
		   :on-success="uploadSuccess"
		   :limit="1"
		   list-type="picture"
		   :data="postData"
		   accept=".png, .jpg"
		 >
		   <el-button size="small" type="primary">点击上传el-button>
		   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kbdiv>
		 el-upload>
		el-form-item>
	<el-form>
template>

<script>
export default {
	data(){
		return {
			imageUrl: "",
			postData: {
				// 填写你的Token
				token: "xxx:xxx:xxx"
			},
			EncodedEntryURI: ""
		}
	},
	methods: {
		uploadSuccess(res) {
			this.form.cover = "http://study.esunr.xyz/" + res.key;
			this.EncodedEntryURI = res.key;
		}
	}
}
script>