搭建网站需要什么技术,建筑贴图素材网站,深圳市营销型网站,问卷调查网站建设目录 1.拖拽上传的剖析
input的file默认拖动 让其他的盒子成为拖拽对象
2.处理文件的上传
处理数据
上传文件的函数
兼顾点击事件
渲染已处理过的文件
测试效果
3.总结 博客主页#xff1a;専心_前端,javascript,mysql-CSDN博客 系列专栏#xff1a;vue3nodejs 实战-…目录 1.拖拽上传的剖析
input的file默认拖动 让其他的盒子成为拖拽对象
2.处理文件的上传
处理数据
上传文件的函数
兼顾点击事件
渲染已处理过的文件
测试效果
3.总结 博客主页専心_前端,javascript,mysql-CSDN博客 系列专栏vue3nodejs 实战--文件上传 前端代码仓库jiangjunjie666/my-upload: vue3nodejs 上传文件的项目用于学习 (github.com) 后端代码仓库jiangjunjie666/my-upload-server: nodejs上传文件的后端 (github.com) 欢迎关注 在上一篇中我们实现了文件的批量上传以及显示实时的上传进度Vue3 Nodejs 实战 文件上传项目--实现文件批量上传显示实时上传进度_専心的博客-CSDN博客 该篇主要的是探讨拖拽上传的思路以及实现。 1.拖拽上传的剖析
input的file默认拖动 其实在我的目前的认知中当然我不是很成熟还在努力学习如有不对请大佬们多包含上传文件其实主要就是二点第一个是页面的交互拖拽的样式显示的上传进度条等等第二个就是网络通信将文件通过post请求发送给后端所以上传文件的接口我们上期中已经写好了这次主要是完成前端页面的交互逻辑。 拖拽上传其实在原生的input选择框中本来就是支持的。 所以我们可以将input铺满整个上传框中并且将其opacity设置为0就能达到隐藏的效果并且既能支持拖拽还能支持点击。 但是一般情况下实际开发中不会这样做一般都是根据设计稿来具体实现不同的样式input框都是隐藏状态隐藏状态就无法做到拖拽文件到其范围里面了。 让盒子成为拖拽对象 上面的input之所以支持拖拽效果因为在原生的html5中他就是被作为一个拖拽对象存在的但是兼容性可能不是特别好这时候我们就可以将其他的盒子也变成一个拖拽对象。 下面是我们存放整个拖拽上传区域的盒子我们将其设置为拖拽对象。
div classcontainer dragenter.preventhandleDragEnter dragover.preventhandleDragOver drop.preventhandleDrop/div
我们在他身上绑定了一些事件 dragover 事件当拖拽对象在一个元素上悬停时即拖拽对象在元素上移动时dragover 事件会持续触发。 dragenter 事件当拖拽对象首次进入一个元素时dragenter 事件会触发。 dragleave 事件当拖拽对象离开一个元素时dragleave 事件会触发。 drop 事件当拖拽对象在元素上松开鼠标按钮时drop 事件会触发。
我们这里只需要将enter和over阻止掉就行
// 处理拖拽进入
const handleDragEnter (e) {e.preventDefault()console.log(Drag entered)
}
// 处理拖拽过程中
const handleDragOver (e) {e.preventDefault() // 阻止默认行为// 处理拖拽过程中的操作console.log(Drag over)
}
// 处理拖拽事件
const handleDrop (e) {e.preventDefault()const files e.dataTransfer.filesconsole.log(上传的文件:, files)
}
现在就可以实现文件的拖拽上传了只要拖拽到指定的区域就可以拿到数据使用的是e.dataTransfer.flies
2.处理文件的上传
处理数据
我们可以定义一个数组放至待上传的文件一个放置已经进行处理过的文件
//存放已经上传的文件的数组
let fileListOver ref([])
//存放要上传的文件的数组
let fileList ref([])
在拖拽事件后数据push进数组中
// 处理拖拽事件
const handleDrop (e) {e.preventDefault()const files e.dataTransfer.filesconsole.log(上传的文件:, files)//将要上传的文件放入数组中fileList.value.push(...files)uploadFile()
}
上传文件的函数 这个上传文件的接口使用的是上一个视频写的接口没看过的可以翻翻前面的Vue3 Nodejs 实战 文件上传项目--实现文件批量上传显示实时上传进度_専心的博客-CSDN博客 接下来就可以进行文件的上传处理上传的数据因为我们是可以选择多文件的所以要递归判断上传文件。在这之前别忘了导入axios的构造函数 //上传文件的函数
const uploadFile async () {//先要计算出要上传的文件的索引const index fileListOver.value.lengthif (fileList.value.length fileListOver.value.length) {//所有的数据都已经上传完毕退出递归return}//存放文件数据let formData new FormData()formData.append(file, fileList.value[index])console.log(formData)let res await http.post(/api/fileUpload, formData)if (res.code ! 200) {fileListOver.value.push({name: fileList.value[index].name,size: fileList.value[index].size 1024 * 1024 ? (fileList.value[index].size / 1024 / 1024).toFixed(2) mb : (fileList.value[index].size / 1024).toFixed(2) kb,status: error})ElMessage({type: error,message: res.msg})} else {//将上传好的数据插入至fileListOver中fileListOver.value.push({name: fileList.value[index].name,size: fileList.value[index].size 1024 * 1024 ? (fileList.value[index].size / 1024 / 1024).toFixed(2) mb : (fileList.value[index].size / 1024).toFixed(2) kb,status: scuuess})ElMessage({type: success,message: 上传成功})}//开个定时器let timer setTimeout(() {uploadFile() //递归clearTimeout(timer)}, 1000)
}
兼顾点击事件
因为我们拖拽文件肯定也是支持选择文件的所以这里做一下兼容其实很简单看过前几期的写这个就是信手拈来。
let fileInputRef ref(null)// input的监听事件
const handlerChange (e) {//将点击上传的文件添加到fileList中fileList.value.push(...e.target.files)// 调用函数uploadFile()
}// 点击上传按钮
const handlerUpload () {fileInputRef.value.click()
}
渲染已处理过的文件 !-- 这里显示已经拖拽上传了的文件 --el-table :datafileListOver stylewidth: 80%el-table-column propname label文件名 width450 /el-table-column propsize label文件大小 width200 /!-- 控制显示 --el-table-column label文件状态 width300template #defaultscope1span v-ifscope1.row.status scuuess stylecolor: #67c23a上传成功/spanspan v-ifscope1.row.status error stylecolor: red上传失败/span/template/el-table-column/el-table
测试效果
选中 上传中 上传完成 全部代码
templatediv classcontainer :class{ draging: dragStyle true } dragenter.preventhandleDragEnter dragover.preventhandleDragOver drop.preventhandleDropel-icon size200 classicon clickhandlerUploadUploadFilled //el-iconinput typefile multiple changehandlerChange reffileInputRef classipt styledisplay: none //div!-- 这里显示已经拖拽上传了的文件 --el-table :datafileListOver stylewidth: 80%el-table-column propname label文件名 width450 /el-table-column propsize label文件大小 width200 /!-- 控制显示 --el-table-column label文件状态 width300template #defaultscope1span v-ifscope1.row.status scuuess stylecolor: #67c23a上传成功/spanspan v-ifscope1.row.status error stylecolor: red上传失败/span/template/el-table-column/el-table
/templatescript setup
import { ref } from vue
import { http } from /api/http.js
import { ElMessage } from element-plus
let fileInputRef ref(null)
//存放已经上传的文件的数组
let fileListOver ref([])
//存放要上传的文件的数组
let fileList ref([])
//拖拽样式
let dragStyle ref(false)
// input的监听事件
const handlerChange (e) {//将点击上传的文件添加到fileList中fileList.value.push(...e.target.files)// 调用函数uploadFile()
}// 点击上传按钮
const handlerUpload () {fileInputRef.value.click()
}// 处理拖拽进入
const handleDragEnter (e) {e.preventDefault()//添加拖拽样式dragStyle.value true
}
// 处理拖拽过程中
const handleDragOver (e) {e.preventDefault() // 阻止默认行为
}
// 处理拖拽事件
const handleDrop (e) {e.preventDefault()const files e.dataTransfer.filesconsole.log(上传的文件:, files)//将要上传的文件放入数组中fileList.value.push(...files)dragStyle.value falseuploadFile()
}
//上传文件的函数
const uploadFile async () {//先要计算出要上传的文件的索引const index fileListOver.value.lengthif (fileList.value.length fileListOver.value.length) {//所有的数据都已经上传完毕退出递归return}//存放文件数据let formData new FormData()formData.append(file, fileList.value[index])console.log(formData)let res await http.post(/api/fileUpload, formData)if (res.code ! 200) {fileListOver.value.push({name: fileList.value[index].name,size: fileList.value[index].size 1024 * 1024 ? (fileList.value[index].size / 1024 / 1024).toFixed(2) mb : (fileList.value[index].size / 1024).toFixed(2) kb,status: error})ElMessage({type: error,message: res.msg})} else {//将上传好的数据插入至fileListOver中fileListOver.value.push({name: fileList.value[index].name,size: fileList.value[index].size 1024 * 1024 ? (fileList.value[index].size / 1024 / 1024).toFixed(2) mb : (fileList.value[index].size / 1024).toFixed(2) kb,status: scuuess})ElMessage({type: success,message: 上传成功})}//开个定时器let timer setTimeout(() {uploadFile() //递归clearTimeout(timer)}, 1000)
}
/scriptstyle langscss scoped
.container {width: 800px;height: 300px;margin: 20px 100px;border: 2px dashed #ccc;display: flex;justify-content: center;align-items: center;.ipt {width: 100%;height: 100%;opacity: 0;display: none;}.icon {color: #ccc;}.icon:hover {cursor: pointer;}//拖拽样式.draging {background-color: #ecf5ff;border: 2px dashed #eaebec;.icon {color: pink;}}
}
/style3.总结 拖拽上传的本质就是用户与页面的交互其实涉及到的难点不多只要懂得了设置div或者某个容器为拖拽对象这种拖拽上传的问题就迎刃而解了如有不理解或更好的方案可以私信或评论交流。
下一篇准备实现大文件的分片上传欢迎关注。
