@baizy/qiniu

基于 element Upload 组件上传图片到七牛云

Usage no npm install needed!

<script type="module">
  import baizyQiniu from 'https://cdn.skypack.dev/@baizy/qiniu';
</script>

README

上传图片到七牛云

基于 element Upload 组件上传图片到七牛云

使用

安装

npm i @baizy/qiniu element-ui --save

引用

// src/main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

import Upload from '../packages/index'
Vue.use(Upload)

使用

// App.vue
<template>
  <div id="app">
    <Upload :qiniu="qiniu" @success="success" />
    <h1 v-text="url"></h1>
  </div>
</template>

<script>
import qiniu from '@/utils/qiniu'
export default {
  name: 'app',
  mixins: [qiniu],
  components: {},
  data() {
    return {
      url: null
    }
  },
  methods: {
    success(url) {
      this.url = url
    }
  }
}
</script>

// vue.config.js
const path = require('path')

const resolve = dir => path.join(__dirname, dir)

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('')
      }
    }
  }
}

在根目录下新建 utils/qiniu.js

-| root
  -| utils
      -| qiniu.js
// qiniu.js
export default {
  data() {
    return {
      qiniu: {
        BUCKETNAME: '', // 七牛云存储空间
        AK: '', // 七牛云 AK
        SK: '', // 七牛云 SK
        DOMAIN: '', // 七牛云 图片域名
        ACTIONPATH: '' // 七牛云 上传地址
      }
    }
  }
}