图片复制上传，拖拽输入框上传，el-upload自定义上传方法（上传和备注框强关联）

1. 效果图：

在这里插入图片描述

2. 复制图片使用的方法：

  • 1.通过监听paste方法，获取复制内容
  • 2.获取复制内容中的clipboardData
  • 3.获取file文件进行上传
<input  @paste.native="handlePaste"  />handlePaste(value){let files = value.clipboardData.filesif(files){files=files[0]}else{files=value.clipboardData.items[0].getAsFile()}console.log(files)
}

3. 拖拽使用的方法：

  • 1.通过监听dragover、drop、dragleave事件，进行判断拖拽
  • 2.drop释放鼠标时，获取对应文件的file并上传
 const e=Dom //节点// 挂载监听拖拽e.removeEventListener('dragover',this.handletDragover,false)e.addEventListener('dragover',this.handlePaste,false)// 挂载监听释放e.removeEventListener('drop',this.handletDrop,false)e.addEventListener('drop',this.handletDrop,false)// 挂载监听离开e.removeEventListener('dragleave',this.handletDragleave,false)e.addEventListener('dragleave',this.handletDragleave,false)const handletDragover(e)=>{e.preventDefault();// 当拖拽到对应元素是设置样式}
const handletDragleave(e)=>{// 离开对应元素是设置样式
}const handletDrop(e)=>{const files = e.dataTransfer.files;// 获取对应的files,并进行上传e.preventDefault();e.stopPropagation();}

4. el-upload封装对应方法，并实现限制种类、大小等

  • 1.组件(copy-upload.vue)：

    <template><el-upload:action="sendUrl":accept="acceptArray.length>0?acceptArray.map(n=>this.acceptType[n]).join(',') :'*'"class="upload-demo":http-request="handleFileUpload":headers="headers":data="data":on-preview="handlePreview":on-remove="handleRemove":before-upload="beforeUpload":before-remove="beforeRemove":on-success="handleSuccess":on-erroe="handleError":multiple="multiple":limit="limit":on-exceed="handleExceed":file-list="fileList"><el-button size="small" type="primary">点击上传</el-button><div v-if="size>0" slot="tip" class="el-upload__tip">{{ acceptTitle!=''?acceptTitle :`只能上传${(acceptArray.map(n=>n=='image'?'图片':n).join('/'))}文件` }}，且不超过{{ filterSize(size) }}</div></el-upload>
</template><script>export default {model:{prop:'parentFileList',event:'change-fileList'},props: {// 请求头headers:{type:Object,default:()=>{}},//   大小限制：10 * 1024 * 1024 = 10MBsize:{type:Number,default:-1},//   展示的文字acceptTitle:{type:String,default:''},//   限制类型，按照acceptType数组里面来acceptArray:{type:Array,default(){return ['doc', 'docx', 'pdf', 'xls', 'xlsx','png','jpg','jpeg','gif']}},//  数量limit:{type:Number,default:null},//   是否可以多选multiple:{type:Boolean,default:false},//   额外数据data:{type:Object,default() {return {uploadType: 'common',security:'public',module:'common',}}},// 存在的数据（v-model关联的）parentFileList:{type:Array,default(){return []}},//   请求头sendUrl:{type:String,default:''}},data() {return {acceptType:{'doc':'application/msword','docx':'application/vnd.openxmlformats-officedocument.wordprocessingml.document','ppt':"application/vnd.ms-powerpoint",'pptx':'application/vnd.openxmlformats-officedocument.presentationml.presentation','xls':'application/vnd.ms-excel','xlsx':'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','pdf':'application/pdf','csv':'.csv','txt':'text/plain','image':'image/*','png':'image/png','gif':'image/gif','jpg':'image/jpg','jpeg':'image/jpeg'},fileList:[],isClearTitle:true};},watch: {parentFileList:{handler(value){this.fileList=value},deep:true,immediate:true},fileList:{handler(value){this.$emit('change-fileList',value)},deep:true,}},created(){// 抛处监听请求this.$emit('inpuPaste',(e)=>{if(e){// 挂载监听复制e.removeEventListener('paste',this.handlePaste,false)e.addEventListener('paste',this.handlePaste,false)}})this.$emit('inpuDrag',(e)=>{if(e){// 挂载监听拖拽e.removeEventListener('dragover',this.handletDragover,false)e.addEventListener('dragover',this.handlePaste,false)// 挂载监听释放e.removeEventListener('drop',this.handletDrop,false)e.addEventListener('drop',this.handletDrop,false)// 挂载监听离开e.removeEventListener('dragleave',this.handletDragleave,false)e.addEventListener('dragleave',this.handletDragleave,false)}})},methods: {handletDragover(e){e.preventDefault();},handletDragleave(e){},handletDrop(e){const files = e.dataTransfer.files;this.copyUp(files)e.preventDefault();e.stopPropagation();},filterSize(size){const pow1024=(num)=>{return Math.pow(1024, num)}if (!size) return ''if (size < pow1024(1)) return size + ' B'if (size < pow1024(2)) return (size / pow1024(1)).toFixed(0) + ' KB'if (size < pow1024(3)) return (size / pow1024(2)).toFixed(0) + ' MB'if (size < pow1024(4)) return (size / pow1024(3)).toFixed(0) + ' GB'return (size / pow1024(4)).toFixed(2) + ' TB'},// 判断judegFileSize(file){let retunBoolean=truelet fileSize = file.size//判断文件类型const fileExtArray=file.name.split('.')const judegFn=()=>{if(this.acceptArray.indexOf(fileExtArray.at(-1))==-1){this.$message.error(`${file.name}上传失败，只能上传${this.acceptArray.join('、')}`)retunBoolean=false}}if(this.acceptArray.length>0){if(this.acceptArray.indexOf('image')!=-1){var pattern = /(\.jpg|\.jpeg|\.png|\.gif)$/i;// 判断文件名是否匹配图片格式的正则表达式if (!pattern.test(`.${fileExtArray.at(-1)}`)) {judegFn()}}else{judegFn()}}if(retunBoolean){if (this.size>0 &&  fileSize > this.size) {this.$message.error(`最大上传${this.filterSize(this.size)}`)retunBoolean=false}}if(!retunBoolean){this.isClearTitle=false}return retunBoolean},postUpObject(file){return {action:this.sendUrl,data:this.data,file:file,headers:this.headers,onSuccess:this.handleSuccess,onError:this.handleError}},// 自定义上传handleFileUpload(data) {const formData = new FormData();formData.append("file", data.file);if(data.data){Object.keys(data.data).forEach(key => {formData.append(key, data.data[key]);})}fetch(data.action, {method: "POST",body: formData,headers: data.headers,'Content-type': 'multipart/form-data'}).then(respone => respone.json()).then(res=>{if (data.onSuccess) data.onSuccess(res, data.file, this.fileList)}).catch(error=>{if (data.onError) data.onError({message:'上传失败'}, data.file, this.fileList)})},// 上传之前，需要将数据追加到fileList，复制图片是存在复制beforeUpload(file){const isFile=this.judegFileSize(file)if(isFile){if(this.multiple){this.fileList.push(file)}else{this.fileList=[file]}}return isFile},// 点击(预览),需要在成功后将url放入file里面handlePreview(file) {if(file.status=="success" && file.url){const extArray=file.url.split('.')const extArrayAll=['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']if(extArrayAll.indexOf(extArray.at(-1))!=-1){window.open(`https://view.officeapps.live.com/op/view.aspx?src=${file.url}`)}else{window.open('http://www.pfile.com.cn/api/profile/onlinePreview?url='+encodeURIComponent(file.url));}}},// 超过限制handleExceed(files, fileList) {this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);},// 删除handleRemove(file, fileList) {const index=this.fileList.findIndex(n=>n.uid==file.uid)if(index!=-1){this.fileList.splice(index,1)this.isClearTitle=true}},// 删除之前beforeRemove(file, fileList) {if(this.isClearTitle){return this.$confirm(`确定移除 ${ file.name }？`);}},// 成功&&插入对应的urlhandleSuccess(res,file,fileList){if(res.code && res.code==200){const resData=res.dataconst index=this.fileList.findIndex(n=>n.uid==file.uid)if(index!=-1){const fileData=this.fileList[index]this.fileList.splice(index,1,Object.assign(fileData,{url:resData.url}))// console.log(this.fileList,'---handleSuccess')console.log(res,'handleSuccess')}}else{this.handleError({message:'上传失败'},file,fileList)}},// 失败handleError(error,file,fileList){const index=this.fileList.findIndex(n=>n.uid==file.uid)if(index!=-1){this.fileList.splice(index,1)this.$message.error(`${file.name}上传失败`)}console.log(error,'handleError')},copyUp(files){if(files && files.length>0){if(!this.multiple){const file=files[0]if(this.judegFileSize(file)){this.fileList=[file]this.handleFileUpload(this.postUpObject(file))}}else{for(let x=0;x<files.length;x++){const file=files[x]if(this.fileList.length<this.limit || !this.limit){if(this.judegFileSize(file)){this.fileList.push(file)this.handleFileUpload(this.postUpObject(file))}}else{this.handleExceed(files,fileList)break;}}}}},handlePaste(value){if(value.clipboardData){const fileList=[...this.fileList]let files = value.clipboardData.filesif(!files){files=Array.from(value.clipboardData.items).map(n=>n.getAsFile()).filter(n=>n)}this.copyUp(files)}},},};
</script><style  scoped>
::v-deep .el-upload-list__item:first-child{margin-left: 0 !important;
}
</style>

  • 2.使用：

    • 1.引入copy-upload组件，并关联对应的v-model
    • 2.监听组件抛出的方法inpuDrag->拖拽相关方法,inpuPaste->复制相关方法
    • 3.对应的input定义ref,然后监听的方法使用，并传入对应的Dom节点， @inpuDrag="$event(input的Dom节点)",@inpuPaste="$event(input的Dom节点)"
    
<div style='width:600px'><el-input v-model='txt' ref="copyUploadRef" style='margin-bottom:10px' type="textarea" :rows="5"></el-input><copy-upload v-model="fileList" :size="10 * 1024 * 1024" acceptTitle="pdf或word或Excel或常见图片格式" :multiple="true" :headers='{}'  @inpuDrag="$event($refs.copyUploadRef.$el)"  @inpuPaste="$event($refs.copyUploadRef.$el)" sendUrl="/api/posts/" :data="{}"></copy-upload>
</div>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/160274.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

竞赛 深度学习猫狗分类 - python opencv cnn

竞赛 深度学习猫狗分类 - python opencv cnn

文章目录 0 前言1 课题背景2 使用CNN进行猫狗分类3 数据集处理4 神经网络的编写5 Tensorflow计算图的构建6 模型的训练和测试7 预测效果8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习猫狗分类 ** 该项目较为新颖&a…
阅读更多...
AI写作软件哪个好？这3个AI写作神器用了都说好！

AI写作软件哪个好？这3个AI写作神器用了都说好！

随着信息时代的快速发展&#xff0c;AI写作早已成为人们创作内容的重要途径之一&#xff0c;在使用AI软件进行创作之前&#xff0c;当然要选择一个优质的写作软件&#xff0c;不过只要你拥有了这3款写作神器&#xff0c;你就能轻松创作出高质量的文章&#xff0c;我们一起来看看…
阅读更多...
前端找工作好难啊，准备转行了

前端找工作好难啊，准备转行了

前言 23年本科应届生&#xff0c;培训机构出来找了2个月&#xff0c;全国海投&#xff0c;3k白干都没人要。 所以经过朋友的推荐&#xff0c;我开始学习网络安全&#xff0c;一共学了大概 5 个多月的时间&#xff0c;今年的 3 月 6 号在长沙找到了一份安全研发的工作&#xff…
阅读更多...
建议收藏《2023华为海思实习笔试-数字芯片真题+解析》（附下载）

建议收藏《2023华为海思实习笔试-数字芯片真题+解析》（附下载）

华为海思一直以来是从业者想要进入的热门公司。但是岗位就那么多&#xff0c;在面试的时候&#xff0c;很多同学因为准备不充分&#xff0c;与岗位失之交臂&#xff0c;无缘进入该公司。今天为大家带来《2023华为海思实习笔试-数字芯片真题解析》题目来源于众多网友对笔试的记录…
阅读更多...
HTML 表格

HTML 表格

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>表格标签</title>/* <style>.yun {widt…
阅读更多...
Pytest-Allure及Allure命令使用

Pytest-Allure及Allure命令使用

一、Allure介绍 Allure是Pytest用于生成测试报告的框架&#xff0c;提供丰富的测试报告功能&#xff1b; 二、Allure安装 Allure安装分为2块&#xff0c;分别是pytest-Allure库安装&#xff0c;本地生成报告并导出的命令行allure安装&#xff1b; 1、pytest-Allure库安装 …
阅读更多...
AITO问界崛起的“临门一脚”，落在了赛力斯汽车的智慧工厂里

AITO问界崛起的“临门一脚”，落在了赛力斯汽车的智慧工厂里

文 | 智能相对论 作者 | 沈浪 AITO问界新M7的销量爆了&#xff0c;口碑也紧接着“爆”了。 AITO问界新M7系列上市以来50天&#xff0c;累计大定突破8万辆。AITO问界M9预计今年12月上市&#xff0c;预订超过了1.5万辆。根据最新公布的产销数据&#xff0c;在过去的10月份&…
阅读更多...
Git 案例（企业如何使用git开发项目）

Git 案例（企业如何使用git开发项目）

一、企业中我们是如何开发 1) 入职第一天,管理人员分配/git账号密码 2) 开发人员下载代码即文档/ 根据文档将环境搭建成功 3) 团队一般会给你讲讲项目相关的支持 4) 你接到第一个需求(或者某个功能,一般要经过沟通,分析,设计...等过程) 5) 创建feature分支(一般一个需求对应…
阅读更多...
K8S的pod创建过程

K8S的pod创建过程

创建流程图 用户发起请求创建deployment&#xff1b;apiserver收到创建资源的请求&#xff0c;apiserver对客户端操作进行身份认证&#xff0c;认证完成后接受该请求&#xff0c;并把相关的信息保存到etcd中&#xff0c;然后返回确认信息给客户端&#xff1b;apiserver向etcd…
阅读更多...
解决爬虫在重定向(Redirect)情况下，URL没有变化的方法

解决爬虫在重定向(Redirect)情况下，URL没有变化的方法

重定向是一种网络服务&#xff0c;它可以实现从一个网页跳转到另一个网页的功能。它把用户请求的网页重定向到一个新的位置&#xff0c;而这个位置可以是更新的网页&#xff0c;或最初请求的网页的不同版本。另外&#xff0c;它还可以用来改变用户流量&#xff0c;当用户请求某…
阅读更多...
VSCode 的 C/C++ 开发环境的傻瓜级自动部署程序

VSCode 的 C/C++ 开发环境的傻瓜级自动部署程序

软件介绍 VSCode 是一款优秀的编辑器&#xff0c;可以通过各种插件&#xff0c;将其配置成 C/C 开发环境。只是对于初学者而言&#xff0c;配置步骤有点繁琐。 软件 VSCode-Setup(MinGW) 提供了自动下载安装 VSCode 并配置成 C/C 开发环境的功能。无需担心该软件会对系统有额…
阅读更多...
jeecg-uniapp 转成小程序的过程 以及报错 uniapp点击事件

jeecg-uniapp 转成小程序的过程 以及报错 uniapp点击事件

uniapp 点击事件 tap: 单击事件 confirm: 回车事件 blur:失去焦点事件 touchstart: 触摸开始事件 touchmove: 触摸移动事件。 touchend: 触摸结束事件。 longpress: 长按事件。 input: 输入框内容变化事件。 change: 表单元素值变化事件。 submit: 表单提交事件。 scroll: 滚动…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023