logo

该视频仅会员有权观看

立即开通课程「Vue.js前端应用开发实践」权限。

¥
199
/ 年
订阅后全站课程均可学习
Vue.js前端应用开发实践

Vue.js前端应用开发实践

使用拖拽的方式选择要上传的文件（dragover, drop）

VuVue.js前端应用开发实践
  • 除了传统的文件选择上传，也可以创建拖拽区域上传文件。
  • 在应用界面中添加一个拖拽区域，允许用户将文件拖放至此。
  • 在组件模板中添加拖拽区域代码，并提供相关样式，如宽度、高度、背景颜色等。
  • 浏览器默认会在新标签页中打开拖拽的图片，这需要通过绑定事件并阻止默认行为来改变。
  • 添加处理拖放事件的方法，从事件对象中获取文件，并在控件中定义处理函数。
  • 实现拖放文件后，自动设置文件名为标题，并生成图像预览，效果类似于传统的文件选择上传。