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