vue3.2图片上传Demo搭建 3 请求数据

安装axios  npm i axios

<template>
    <div class="container py-3">
        <ActionsBar />
        <div class="d-flex justify-content-between  align-items-center  py-2">
            <h6 class="text-muted mb-0">文件</h6>
            <button class="rounded-button">
                <icon-arrow-up />
            </button>
        </div>
        <FilesList :files="files"/>

    </div>

</template>
<script setup>
import ActionsBar from '../components/ActionsBar.vue';
import FilesList from '../components/files/FilesList.vue';
import axios from 'axios'

import { ref,onMounted } from 'vue';
const files=ref([])

onMounted(
   async ()=>{
   const {data}=await axios.get("http://localhost:3031/files")
    console.log(data)
   console.log(typeof(data))
   files.value=data;
}
)

</script>

<style>
</style>

拆分组件 div>row

新建 components/files/FilesList.vue

<template>
    <div class="row">
   <FileItem v-for="(file,index) in files" :key="index" :file="file"/>

    </div>

</template>
 <script setup>
 import FileItem from './FileItem.vue'
//属性传值
defineProps({
    files: {
        type: Array,
        required: true,
    }
})


</script>
<style>
</style>

FileItem.vue

<template>
        <div class="col-md-3">
            <div class="card mb-4">
                <img 
                    v-if="file.url" class="file-thumb"  src="https://picsum.photos/id/1015/400/160" />
                <div v-else class="card-body text-center py-5">
                    <icon-type-common height="4em" width="4em" />
                </div>
                <div class="card-footer">
                    <div class="d-flex align-items-center">
                        <icon-type-commion />
                        <span class="file-name">{{ file.name }}</span>
                    </div>
                </div>
            </div>
        </div>
</template>
<script setup>
defineProps({
    file:{
        type:Object,
        required:true,
    }
});


</script>

动态显示渲染 图标 FileItem.vue 效验

<template>
        <div class="col-md-3">
            <div class="card mb-4">
                <img 
                    v-if="isValidImage" class="file-thumb"  src="https://picsum.photos/id/1015/400/160" />
                <div v-else class="card-body text-center py-5">
                   <component :is="iconFileType" height="4em" width="4em" />
                </div>
                <div class="card-footer">
                    <div class="d-flex align-items-center">
                       <component :is="iconFileType" />
                        <span class="file-name">{{ file.name }}</span>
                    </div>
                </div>
            </div>
        </div>
</template>
<script setup>
import {computed } from 'vue'
//动态显示图标
const iconFileType=computed(
    ()=>{
        const iconTypes={
            "image/jpeg":"icon-type-image",
            "image/png":"icon-type-image",
            "image/jpg":"icon-type-image",
            "application/zip":"icon-type-zip",
            "application/msword":"icon-type-doc",
            "application/vnd.ms-excel":"icon-type-excel",
            "application/pdf":"icon-type-pdf",
              "video/mp4":"icon-type-video",
        };
        return iconTypes[props.file.mimeType]?iconTypes[props.file.mimeType]:"icon-type-common"

    }
)
//图片URL 计算 
const isValidImage=computed(
    ()=>{
    const imageMimeTypes=["image/jpeg","image/png","image/jpg"]
    return imageMimeTypes.includes(props.file.mimeType) && !!props.file.url
    }
)

const props=defineProps({
    file:{
        type:Object,
        required:true,
    }
});


</script>

排序箭头切换

新增  SortToggler.vue

<template>
    <div class="container py-3">
        <ActionsBar />
        <div class="d-flex justify-content-between  align-items-center  py-2">
            <h6 class="text-muted mb-0">文件</h6>
           <SortToggler @sort-change="hanleSortChange($event)"/>
        </div>
        <FilesList :files="files"/>

    </div>

</template>
<script setup>
//http://localhost:3031/files?_sort=name&_order=desc 倒序
//http://localhost:3031/files?_sort=name&_order=asc 正序
import ActionsBar from '../components/ActionsBar.vue';
import FilesList from '../components/files/FilesList.vue';
import SortToggler from '../components/SortToggler.vue';
import axios from 'axios'

import { ref,onMounted,reactive,watchEffect,watch} from 'vue';
const files=ref([]);
//修改query值 实现倒序正序
const query =reactive({
    _sort:"name",
    _order:"asc",

})
//平常我们通过查询字符串的方式传参需要通过对字符串进行处理后才能使用。
//URLSearchParams()中有帮我们做处理的方法直接返回处理后的数据

// watchEffect(
//    async ()=>{
//        console.log(new URLSearchParams(query))
//    const {data}=await axios.get(`http://localhost:3031/files?${new URLSearchParams(query)} `);

//    files.value=data;
// }
// );

watch(()=>query._order,
   async ()=>{
       console.log(new URLSearchParams(query))
   const {data}=await axios.get(`http://localhost:3031/files?${new URLSearchParams(query)} `);

   files.value=data;
},{immediate:true}
);



const hanleSortChange =(payload)=>{
    console.log(payload);
    query._sort=payload.column;
    query._order=payload.order;
}


</script>

<style>
</style>

重写MyFiles.vue

<template>
    <div class="container py-3">
        <ActionsBar />
        <div class="d-flex justify-content-between  align-items-center  py-2">
            <h6 class="text-muted mb-0">文件</h6>
           <SortToggler @sort-change="hanleSortChange($event)"/>
        </div>
        <FilesList :files="files"/>

    </div>

</template>
<script setup>
//http://localhost:3031/files?_sort=name&_order=desc 倒序
//http://localhost:3031/files?_sort=name&_order=asc 正序
import ActionsBar from '../components/ActionsBar.vue';
import FilesList from '../components/files/FilesList.vue';
import SortToggler from '../components/SortToggler.vue';
import axios from 'axios'

import { ref,onMounted,reactive,watchEffect,watch} from 'vue';
const files=ref([]);
//修改query值 实现倒序正序
const query =reactive({
    _sort:"name",
    _order:"asc",

})
//平常我们通过查询字符串的方式传参需要通过对字符串进行处理后才能使用。
//URLSearchParams()中有帮我们做处理的方法直接返回处理后的数据

// watchEffect(
//    async ()=>{
//        console.log(new URLSearchParams(query))
//    const {data}=await axios.get(`http://localhost:3031/files?${new URLSearchParams(query)} `);

//    files.value=data;
// }
// );

watch(()=>query._order,
   async ()=>{
       console.log(new URLSearchParams(query))
   const {data}=await axios.get(`http://localhost:3031/files?${new URLSearchParams(query)} `);

   files.value=data;
},{immediate:true}
);



const hanleSortChange =(payload)=>{
    console.log(payload);
    query._sort=payload.column;
    query._order=payload.order;
}


</script>

<style>
</style>