vue.js 3.2.22:多选上传图片带缩略图可删除
2023-09-14 08:59:32 时间
一,js代码:
Upload.vue
<template> <div style="width:100%;height:100vh;background: #ffff00;display: flex;flex-direction: column;"> 请选择上传幻灯图片: <input type="file" id="back" ref="backfile" multiple @change="handleFile" /> <div id="imglist" style="width:100%;"> <div v-for="(item,i) in selFiles" :key="i" style="float:left;margin-left: 20px;margin-top: 20px;height:150px;position:relative;"> <img :src="item.fileimg" style="height:150px;"/> <div @click="delqueue(i)" style="position:absolute;width:30px;height:30px;line-height:30px;border-radius:15px;top:-15px;right:-15px;background:#ff0000;">x</div> </div> </div> <input type="button" value="上传" @click="upload" /> </div> </template> <script> import {ref} from "vue" export default { name: "Upload", setup() { //选中的图片文件,保存在数组中 const selFiles = ref([]); //选中图片后的处理 const handleFile = () => { let filePaths = window.event.target.files; //清空原有缩略图 if (filePaths.length === 0) { //未选择,则返回 return } else { //清空数组中原有图片 selFiles.value.length = 0; } //把新选中的图片加入数组 for( var i=0;i<filePaths.length; i++ ){ let file = filePaths[i]; let one = { fileimg:URL.createObjectURL(file), //预览用 file:file, } selFiles.value.push(one); } } //从上传数组中删除 const delqueue = (index) => { if (confirm("确定从上传队列中删除当前图片?")) { selFiles.value.splice(index,1); } } //上传 const upload = () => { //判断是否选中文件 var file = selFiles.value[0].file; if (typeof(file) === "undefined") { alert("请在上传前先选中文件!"); return; } // 创建一个表单数据 var data = new FormData(); //遍历文件并上传 for( var i=0;i<selFiles.value.length; i++ ){ let fileOne = selFiles.value[i].file; console.log("上传:"+fileOne.name) data.append("file",fileOne); }
} return { handleFile, selFiles, delqueue, upload, } } } </script> <style scoped> </style>
说明:图片文件提交到后端的代码没有添加,大家可以自行用axios等网络库来实现
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,测试效果
三,查看vue版本:
liuhongdi@lhdpc:/data/vue/imgupload$ npm list vue imgupload@0.1.0 /data/vue/imgupload ├─┬ @vue/cli-plugin-babel@4.5.15 │ └─┬ @vue/babel-preset-app@4.5.15 │ └── vue@3.2.22 deduped └─┬ vue@3.2.22 └─┬ @vue/server-renderer@3.2.22 └── vue@3.2.22 deduped
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue.js快速介绍-超级马里奥像素艺术
- JS+CSS3 360度全景图插件 - Watch3D.js
- JS框架_(JQuery.js)上传进度条
- vue install 组件
- 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [Vue-rx] Stream an API using RxJS into a Vue.js Template
- [Vue] Use Vue.js Watchers to Respond to Async Updates
- vue.js3:用exif-js读取图片的exif信息(vue@3.2.36)
- [Vue + TS] Using Route events inside Vue
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue.js3: 使用js-md5 (js-md5@0.7.3 / vue@3.2.26)
- vue.js 3.2.22:多选上传图片带缩略图可删除
- vue3.x:用webpack-bundle-analyzer分析chunk文件过大的原因(vue.js 3.0.5/@vue/cli 4.5.13)
- win10 安装vue 详解-包括node.js、npm、webpack
- Vue2.js:v-click-outside自定义指令和vue-click-outside监听鼠标点击元素外部区域事件
- 184:vue+openlayers 设置时间显示白天黑夜交替图
- 072:vue+openlayers拖拽放大所选区域(DragPan示例代码)
- 065:vue+openlayers显示不同颜色point(示例代码)
- 主流前端框架对比:Vue.js , React, Angular.js
- 前端必备技能知识:JS导出Blob流文件为Excel表格、Vue.js使用Blob的方式实现excel表格的下载(流文件下载)
- vue-ant design示例大全——按钮本地css/js资源
- Vue学习笔记——使用Vue脚手架