当前位置: 首页 > news >正文

js封装上传组件 点击拖拽上传

效果图

上传组件代码

<template><div id="appp"><label for="fileInput" class="upload"  @dragover="fileDragover" @drop="fileDrop" v-if="log != 'checkLog'"><!-- <div class="jia" v-if="!loadingBool">+</div><div class="jia" v-else><i class="el-icon-loading" style="font-size: 30px;"></i></div> --><div class="jia">+</div><div class="text1">拖放或点击上传</div><div class="text2">仅支持 PDF、JPG 和 PNG 格式。最大文件尺寸 100 MB。</div></label><div v-for="(item,index) in value" :key="index" class="imgContainer"><el-imagestyle="width: 100%;height: 100%;display: inline-block;":src="resourUrl + item"fit="cover"></el-image><el-button icon="el-icon-close" class="delBtn" circle size="mini" @click="delImg(index)" v-if="log != 'checkLog'"></el-button></div><div><input type="file" id="fileInput" accept="image/*" @change="chooseUploadFile" style="display: none;"></div></div></template><script>import api from "@/api/http";
import { index } from "@antv/x6/lib/util/dom/elem";export default {props: {value: {type: Array,default: ()=>[]},log: {type: String,default: ''},},data () {return {resourUrl:IP.resourUrl,MAX_FILE_SIZE: 100 * 1000 * 1000}},watch:{value(val){this.$emit('input',val)},immediate: true,deep:true},methods: {delImg(index){this.value.splice(index,1)},// 上传图片uploadImg(file){if (!/\.(jpg|jpeg|png|pdf|PDF|JPG|PNG)$/.test(file.name) ) { this.$message({message: '仅支持 PDF、JPG 和 PNG 格式。',type: 'warning'});return;     }if (file.size > this.MAX_FILE_SIZE) {this.$message({message: '仅支持最大文件尺寸 100 MB。',type: 'warning'});return }let formData = new FormData();formData.append("upFile", file);api.getAddFileUrl(formData).then((response) => {let res = response.data;let url = res.message; // 拿到图片url后发送图片消息// this.loadingBool=falsethis.value.unshift(url)}).catch(err => {console.log(err, '错误')})},// 点击上传chooseUploadFile (e) {console.log(e.target.files);const file = e.target.files.item(0)if (!file) return// this.loadingBool=truethis.uploadImg(file)// 清空,防止上传后再上传没有反应e.target.value = ''},// 拖拽上传fileDragover (e) {e.preventDefault()},fileDrop (e) {e.preventDefault()const file = e.dataTransfer.files[0] // 获取到第一个上传的文件对象console.log(file)console.log('拖拽释放鼠标时')if (!file) return// this.loadingBool=truethis.uploadImg(file)// 清空,防止上传后再上传没有反应e.target.value = ''},}}</script><style lang="less" scoped>.imgContainer{display: inline-block;height: 170px;flex-basis: 28%;margin-right: 5%;margin-bottom: 20px;position: relative;.delBtn{position: absolute;top: 5px;right: 5px;}}.upload{display: block;height: 170px;flex-basis: 28%;margin-right: 5%;margin-bottom: 30px;border: 1px dashed #D9D9D9;background-color: #FBFBFB;text-align: center;padding: 20px 30px;cursor:pointer;z-index: 1;.jia{color: #4E5969;height: 50px;}.text1{color: #4E5969;height: 40px;line-height: 40px;font-size: 14px;}.text2{height: 40px;line-height: 20px;color: #86909C;font-size: 12px;font-weight: 400;}}  #appp{display: flex;width: 846px;margin-bottom: 30px;flex-wrap:wrap;}</style>

父组件引用

<template><uploadImg v-model="form.urls" :log="log"></uploadImg>
</template>import uploadImg from "@/components/upload/uploadImg.vue";
export default {components: {uploadImg},
}


http://www.mrgr.cn/news/19320.html

相关文章:

  • C/C++趣味编程
  • array 和 vector
  • 透明加密为什么是最佳选择,10款透明加密软件推荐
  • 文章解读与仿真程序复现思路——中国电机工程学报EI\CSCD\北大核心《考虑极端事件的电力系统惯量与一次调频备用联合规划配置方法》
  • 【在Unity完成三维场景多人在线同时操作的实现方式】
  • pacs图像之翻页同步
  • Java语言程序设计基础篇_编程练习题**17.21 (十六进制编辑器)
  • hive on spark 合并小文件
  • 24年最新ComfyUI 入门教程:comfyui基本功能详解!
  • 【多线程】二进制信号量与互斥锁的不同,以及优势在哪里?
  • Allegro shape操作
  • MySQL触发器:深入理解触发器的语法和示例
  • 【网安科普】网络安全未来趋势,揭秘技术突破与职业机遇,零基础入门到精通,收藏这一篇就够了
  • 贝宁共和国驻华大使馆聘任向凌云教授为新兴产业顾问
  • 道可云人工智能元宇宙每日资讯|《上海市推动直播经济高质量发展三年行动计划(2024-2026年)》发布
  • 【加密社】如何根据.dat文件恢复密钥
  • Linux服务器CPU和IO的监控利器-iostat简介
  • Rust多线程编程概述
  • MARK图像处理与计算机视觉基础,经典以及最近发展
  • [数据集][目标检测]鲜花检测数据集VOC+YOLO格式25215张106类别