Watt-PC端UI组件库（适用于Vue 3）

watt-upload

TIP

安全考虑，该组件必须在用户登录的情况下才能使用！！！ 
请在下方的 AuthLogin 登录 组件操作后再使用。

介绍

提供给用户提交本地图片或文件上传到oss上，并记录在数据库中。目前 Uploader 组件支持自动上传到服务器，且只是内部使用，访问地址与上传接口都封装了。如果你想上传到自己的服务器，需自行实现 UploadQiniu 方法的逻辑。

引入

import { createApp } from 'vue'
import { WattUpload } from 'wattpc-ui'

createApp().use(WattUpload)

代码演示

基础使用

上传图片
图片上传
<template>
    <div>
        <watt-upload v-model="fileList" :bus-type="6" media-type="image" />
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const fileList = ref([])

</script>

UP-TXT自定义

上传封面图
上传中文本自定义
<template>
    <div>
        <watt-upload v-model="fileList" :bus-type="6" media-type="image" up-txt="上传封面图" />
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const fileList = ref([])

</script>

TIP-TXT自定义

上传图片
格式支持 PNG,JPG,JPEG
格式支持
<template>
    <div>
        <watt-upload v-model="fileList" :bus-type="6" media-type="image" tip-txt="格式支持 PNG,JPG,JPEG" />
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const fileList = ref([])

</script>

限制长度

上传图片
限制长度
<template>
    <div>
        <watt-upload v-model="fileList" :bus-type="6" media-type="image" :max-length="1" />
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const fileList = ref([])

</script>

图片显示

Preview
Preview
上传图片
<template>
    <div>
        <watt-upload v-model="fileList" :max-length="3" :bus-type="6" media-type="image" />
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
const fileList = ref([
  {
    name: '42a98226cffc1e178a82859ae6dbe103738da977434e.jpg',
    url: 'https://static.jsvue.cn/watt/42a98226cffc1e178a82859ae6dbe103738da977434e.jpg'
  },
  {
    name: '2o_100sh.jpg',
    url: 'https://static.jsvue.cn/watt/2o_100sh.jpg'
  }
])
</script>

getToken 方法传入

上传图片
<template>
    <div>
        <watt-upload v-model="fileList" :max-length="3" private-bucket :bus-type="6" media-type="image" :request-token-method="preUploadToken" />
    </div>
</template>
<script setup>
import { ref, watch, inject } from 'vue'
const Fetch = inject('$network', null)
const Model = inject('$model', null)

if (Fetch && Model) {
    const Http = new Fetch({
        config: {
            APP_ID: '__UNI__55B0695', // Store.get('config').APP_ID
            BASE_URL: 'https://api.jsvue.cn',
        }
    })

    const preUploadToken = Model(Http, {
        prefix: '/user-center',
        needJudgeResContent: false,
        url: '/watt/preUploadToken',
        method: 'post'
    })
}

const fileList = ref([])

</script>

私有桶图片上传

上传图片
<template>
    <div>
        <watt-upload v-model="fileList" :max-length="3" private-bucket :bus-type="6" media-type="image" />
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
const fileList = ref([])
</script>

视频上传

上传视频
<template>
    <div>
        <watt-upload v-model="fileList" :max-length="3" :bus-type="6" media-type="video" />
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
const fileList = ref([])
</script>

私有桶视频上传

上传视频
<template>
    <div>
        <watt-upload v-model="fileList" :max-length="3" private-bucket :bus-type="6" media-type="video" />
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
const fileList = ref([])
</script>

文件类型

上传文件
<template>
    <div>
        <watt-upload v-model="fileList" :max-length="2" :bus-type="6" />
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'

const fileList = ref([])

</script>

文件类型 显示

上传文件
Bromad _ Jurell - Either Way _Bass Rebels_ R_B Pop Music Copyright Free.mp3
Brownie - Stressed Out _FMW Release_ _CHILL MUSIC_.mp3
<template>
    <div>
        <watt-upload v-model="mp3FileList" :max-length="3" :bus-type="6" />
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'

const mp3FileList = ref([
  {
    name: 'Bromad _ Jurell - Either Way _Bass Rebels_ R_B Pop Music Copyright Free.mp3',
    url: 'https://newsmp3.cnhnb.com/voice/mp3/ipr/2023/11/14/75eeb63823734bd4ac0d2608327bd755.mp3'
  },
  {
    name: 'Brownie - Stressed Out _FMW Release_ _CHILL MUSIC_.mp3',
    url: 'https://newsmp3.cnhnb.com/voice/mp3/ipr/2023/11/14/255ad726538d431483aaa2b3a946d1c9.mp3'
  }
])

</script>
Last Updated:
Contributors: cabber