目录
一、组件使用示例
- 按钮btn文档示例
1.1 属性使用
-
API说明
-
示例
<q-btn label="上传" outline :loading="is_loading" />
-
三种传值方式
- 直接赋值:如
label
,此处直接传字符串 - 布尔值:如
outline
,不写即为false,写了即为true,也可以绑定变量 - 绑定变量:如
:loading
,其值会随is_loading变量动态切换
- 直接赋值:如
-
具体传值类型:见说明及例子
1.2 事件使用
- API说明
- 示例
<q-btn label="上传" @click='send' />
send为函数名:点击会触发send函数执行
1.3 插槽使用
- API说明
- 示例
<q-btn :loading="is_loading" @click='is_loading=!is_loading' label="提交" > <template v-slot:loading> <q-spinner-facebook /> </template> </q-btn>
v-slot具名插槽:文档描述里明确,传入的是QSpinner组件,
q-spinner-facebook
在目录VueComponents > Spinners下
1.4 方法使用
- API说明
- 示例
<template> <q-btn ref="uploadbtn" label="上传按钮" @click="send" /> <q-btn label="触发上传按钮事件" @click="trigger" /> </template> <script lang="ts" setup> import { ref } from 'vue'; const uploadbtn = ref(null); const trigger = () => uploadbtn.value?.click(); const send = () => console.log('send函数被触发'); </script>
参照此篇3.4节理解:传送门
二、上传文件formdata实现
2.1 axios写法
- 参照此篇3.2节封装代码:传送门
- request.ts:先并入src/boot/axios.ts中,见上一篇
- https.ts:不变,见第一条传送门
- utils/videoapi/api_video.ts
import http from '../http'; const version = ''; export default { post_video(params: FormData) { return http.file_post(version + '/videos/videosupload/', params); }, };
2.2 store写法
- src/stores/VideoStore.ts
import { defineStore } from 'pinia'; import videoapi from 'src/utils/videoapi/apiVideo'; export const useVideoSerialsStore = defineStore('videoSerials', { state: () => { return { is_loading: false, videoSerialName: '最伟大的作品'; videos: [], coverImg: 1; }; }, actions: { async upload_videos() { try { // 让btn处于loading状态 this.is_loading = true; // 循环包裹并上传videos列表中的每个视频 // 若只有一个则不需要for循环 for (const item of this.videos) { // 针对后端接口,二进制文件及其他参数均需包裹进FormData对象中 const videoData = new FormData(); // 添加二进制文件方法 videoData.append('videoFile', item); // 添加非字符串数据:此处数字为外键字段 videoData.append( 'coverImg', JSON.stringify(this.coverImg) ); // 添加字符串数据 videoData.append('videoSerialName', this.videoSerialName); // 数据包装完成,上传 await videoapi.post_video(videoData); } // 上传完毕,让btn解除loading状态 this.is_loading = false; } catch (error) { this.is_loading = false; console.log(error); } }, }, });
后端Django写法详见此篇4.1节:传送门
2.3 vue写法
- file组件位置:Vue Components > Form Components > File Picker
- src/pages/test.vue
<template> <q-page padding> <q-file v-model="videoSerialStore.videos" multiple label="请选择要上传的视频" accept="video/*" /> <q-btn label="上传视频" @click="videoSerialStore.upload_videos" :loading="videoSerialStore.is_loading" /> </q-page> </template> <script setup lang="ts"> import { useVideoSerialsStore } from 'src/stores/VideoStore' const videoSerialStore = useVideoSerialsStore(); </script>
q-file:其为input标签,上传的文件为file[]文件列表,并双向绑定到v-model所指定变量