Vue框架（三）------quasar组件使用及文件上传

一、组件使用示例

• 按钮btn文档示例

1.1 属性使用

• API说明
  

• 示例

  <q-btn
    label="上传"
    outline
    :loading="is_loading"
  />
  1
  2
  3
  4
  5

• 三种传值方式

  • 直接赋值：如label，此处直接传字符串
  • 布尔值：如outline，不写即为false，写了即为true，也可以绑定变量
  • 绑定变量：如:loading，其值会随is_loading变量动态切换

• 具体传值类型：见说明及例子

1.2 事件使用

• API说明
  
• 示例

  <q-btn
    label="上传"
    @click='send'
  />
  1
  2
  3
  4

  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>
  1
  2
  3
  4
  5
  6
  7
  8
  9

  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>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

  参照此篇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);
      },
    };
    1
    2
    3
    4
    5
    6
    7
    8

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);
        }
      },
    },
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47

  后端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>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22

  q-file：其为input标签，上传的文件为file[]文件列表，并双向绑定到v-model所指定变量

三、批量文件上传（待补充）

3.1 vue-simple-uploader

---

跳转至vue总篇目录