Element的Upload组件实现多图上传七牛云

开发后台业务,涉及到多图上传,项目采用的是Element-UI,下面来实现下upload组件上传图片到七牛。官网文档https://element.eleme.cn/#/zh...

1)二次封装upload组件





获取上传token

import axios from 'axios';

/**
 * 获取七牛云上传token
 */

function getUploadToken() {
  return new Promise((resolve) => {
    axios.get('/system/get_token').then((res) => {
      resolve(res.data)
    }).catch((error) => {
      this.$message.error(error);
    })
  }).catch((e) => {});
}

export {
  getUploadToken
}

2.使用组件





3.实现效果
Element的Upload组件实现多图上传七牛云_第1张图片
返回的数据,根据接口需要的数据格式做出相应处理
[{"url":"http://xxx.xxx.com/front_158424709108427.png","uid":1584247092727,"status":"success"},{"url":"http://xxx.xxx/front_158424709683169.png"}]

觉得文章对小伙伴有收益的,点个赞~~

你可能感兴趣的:(element,upload,七牛云存储,vue.js)