vue3+vite+vant文件上传

1：文件上传下载

//上传文件
            const afterRead = () => {
                for (let file of fileList.value) {
                    //1:加载状态
                    file.status = 'uploading';
                    file.message = '上传中...';
                    // 2.构建 FormData
                    const formData = new FormData();
                    formData.append("fileL", file.file);
                    formData.append("file_name", file.file.name);
                    formData.append("entity_code", "code");
                    formData.append("entity_id", entity_id);
                    // 3.发送
                    save(formData).then(resp => {
                        if (resp.success === true) {
                            Toast('文件上传成功!')
                            file.status = 'done';
                            file.message = '上传完成';
                            file.fileId = resp.id;
                            getAll();
                        } else {
                            file.status = 'failed'
                            file.message = '上传失败'
                        }
                    }).catch(() => {
                        file.status = 'done ';
                        file.message = '上传失败';
                    });
                }
            };

 <van-row justify="center">
                <van-col>
                    <van-field label="文件上传" placeholder="请选择要上传的文件"/>
                    <van-uploader v-model="fileList" accept="" :after-read="afterRead" multiple :max-count="4"
                                  :max-size="500 * 1024" @oversize="onOversize" :before-delete="deleteFile"
                                  result-type="file"
                                  upload-text="选择文件"/>
                </van-col>
            </van-row>

 //删除确认
            const confirm = () => {
                deleteLeaseFile({id: delId.value}).then(resp => {
                    if (resp.success) {
                        Toast('删除成功了');
                        getAll();//重新加载列表
                        show.value = false;

                    } else {
                        Toast('删除失败!请重新操作');
                    }
                }).catch(() => {
                    Toast('删除失败!请重新操作');
                });

            }

//下载

            const down = (id, fileName) => {
                downFile({id: id}).then(resp => {
//下载方式一：
                    // console.log(resp);
                    // let url = window.URL.createObjectURL(new Blob([resp]));
                    // let link = document.createElement('a');
                    // link.style.display = 'none';
                    // link.href = url;
                    // link.setAttribute('download', fileName);
                    // document.body.appendChild(link);
                    // link.click();
                    // document.body.removeChild(link); // 下载完成移除元素
                    // window.URL.revokeObjectURL(url); // 释放掉blob对象
//下载方式二：支持移动端
                    saveAs(new Blob([resp], {
                        type: "application/octet-stream"
                    }), fileName);

                }).catch(() => {
                });
            }

2：添加权限控制

// 自定义指令
export default {
    mounted(el, binding) {
        //当前用户所有权限
        const permissionBtn = localStorage.getItem('auths').split(',');
        // value 获取用户使用自定义指令绑定的内容
        const {value} = binding;
        if (value && value instanceof Array && value.length > 0) {
            const permissionFunc = value;
            let num=0;
           permissionFunc.forEach(a => {
                if (permissionBtn.indexOf(a)>=0) {
                    num++;
                }
            });
            // 当用户没有这个按钮权限时，设置隐藏这个按钮
            if (num===0) {
                el.style.display = 'none'
            }
        } else {
            throw new Error('无权限');
        }
    }
}

说明：
1：main.js导入
import permission from './api/permission.js'
2：使用 v-permission 直接添加到按钮上
<van-button v-permission="['AUTH_INFO_DE_V']" class="custom-button" color="linear-gradient(to right, rgb(255 185 78), #ffb037)"
                                    type="primary" size="small" @click="onClick(dataItem['id'])">详细信息
                        </van-button>

3： echarts

import * as echarts from 'echarts'

showData().then(data => {
                    let percentage = 0;
                    for (let index = 0; index < data.length; index++) {
                        percentage = percentage + parseInt(data[index].value);
                    }
                    for (let index = 0; index < data.length; index++) {
                        if (data[index].value == 0) {
                            data[index].name = data[index].name + '0%';
                        } else {
                            data[index].name = data[index].name + (parseInt(data[index].value) / percentage * 100).toFixed(2) + '%'
                        }

                    }
                    let a = [];
                    for (let i = 0; i < data.length; i++) {
                        a.push(data[i].name)
                    }
                    let option = {
                        tooltip: {
                            show: true,
                            formatter: "{a} <br/>{b} : {c}"
                        },
                        legend: {
                            x: '60%',
                            y: 'center',
                            orient: 'vertical',
                            data: a,
                            textStyle: {
                                color: '#000'
                            }
                        },
                        toolbox: {},
                        color: ['#32afea', '#f7b11b', '#f76014', ',#a5a5a5', '#82a729'],
                        calculable: true,
                        series: [
                            {
                                name: '',
                                type: 'pie',
                                clockWise: true,
                                startAngle: 100,
                                center: ['30%', '50%'],
                                radius: [40, 80],
                                data: data,
                                label: {
                                    "normal": {
                                        "show": false,
                                        "textStyle": {
                                            "fontSize": 12
                                        },
                                        position: 'inner'
                                    }
                                }
                            }
                        ]
                    };
                    myCharts1.setOption(option, true);
                });

其他：

4：移动端文件下载，使用到file-saver   

import {saveAs} from 'file-saver'