vue3+vite+vant文件上传

标签：const vant resp value link file vue3 id vite

1：文件上传下载

 1 //上传文件
 2             const afterRead = () => {
 3                 for (let file of fileList.value) {
 4                     //1:加载状态
 5                     file.status = 'uploading';
 6                     file.message = '上传中...';
 7                     // 2.构建 FormData
 8                     const formData = new FormData();
 9                     formData.append("fileL", file.file);
10                     formData.append("file_name", file.file.name);
11                     formData.append("entity_code", "code");
12                     formData.append("entity_id", entity_id);
13                     // 3.发送
14                     save(formData).then(resp => {
15                         if (resp.success === true) {
16                             Toast('文件上传成功!')
17                             file.status = 'done';
18                             file.message = '上传完成';
19                             file.fileId = resp.id;
20                             getAll();
21                         } else {
22                             file.status = 'failed'
23                             file.message = '上传失败'
24                         }
25                     }).catch(() => {
26                         file.status = 'done ';
27                         file.message = '上传失败';
28                     });
29                 }
30             };

保存文件

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

文件ui

 1  //删除确认
 2             const confirm = () => {
 3                 deleteLeaseFile({id: delId.value}).then(resp => {
 4                     if (resp.success) {
 5                         Toast('删除成功了');
 6                         getAll();//重新加载列表
 7                         show.value = false;
 8 
 9                     } else {
10                         Toast('删除失败!请重新操作');
11                     }
12                 }).catch(() => {
13                     Toast('删除失败!请重新操作');
14                 });
15 
16             }

删除文件

 1 //下载
 2 
 3             const down = (id, fileName) => {
 4                 downFile({id: id}).then(resp => {
 5 //下载方式一：
 6                     // console.log(resp);
 7                     // let url = window.URL.createObjectURL(new Blob([resp]));
 8                     // let link = document.createElement('a');
 9                     // link.style.display = 'none';
10                     // link.href = url;
11                     // link.setAttribute('download', fileName);
12                     // document.body.appendChild(link);
13                     // link.click();
14                     // document.body.removeChild(link); // 下载完成移除元素
15                     // window.URL.revokeObjectURL(url); // 释放掉blob对象
16 //下载方式二：支持移动端
17                     saveAs(new Blob([resp], {
18                         type: "application/octet-stream"
19                     }), fileName);
20 
21                 }).catch(() => {
22                 });
23             }

文件下载：2种方式

2：添加权限控制

 1 // 自定义指令
 2 export default {
 3     mounted(el, binding) {
 4         //当前用户所有权限
 5         const permissionBtn = localStorage.getItem('auths').split(',');
 6         // value 获取用户使用自定义指令绑定的内容
 7         const {value} = binding;
 8         if (value && value instanceof Array && value.length > 0) {
 9             const permissionFunc = value;
10             let num=0;
11            permissionFunc.forEach(a => {
12                 if (permissionBtn.indexOf(a)>=0) {
13                     num++;
14                 }
15             });
16             // 当用户没有这个按钮权限时，设置隐藏这个按钮
17             if (num===0) {
18                 el.style.display = 'none'
19             }
20         } else {
21             throw new Error('无权限');
22         }
23     }
24 }
25 
26 说明：
27 1：main.js导入
28 import permission from './api/permission.js'
29 2：使用 v-permission 直接添加到按钮上
30 <van-button v-permission="['AUTH_INFO_DE_V']" class="custom-button" color="linear-gradient(to right, rgb(255 185 78), #ffb037)"
31                                     type="primary" size="small" @click="onClick(dataItem['id'])">详细信息
32                         </van-button>

权限文件

 

标签：const,vant,resp,value,link,file,vue3,id,vite
From： https://www.cnblogs.com/angin-iit/p/17218216.html