IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> js之element的黏贴上传多张单张图片 -> 正文阅读

[JavaScript知识库]js之element的黏贴上传多张单张图片

?<el-form?ref="form"?:model="radiovaluer"??label-width="80px"?:rules="rules"?>
????????<el-form-item?label="审批结果"?prop="radiovalue">
????????????<el-radio-group?size="mini"?v-model="radiovaluer.radiovalue"?@change="modificationvalp">
??????????????<el-radio?:label="1">通过</el-radio>
??????????????<el-radio?:label="0">不通过</el-radio>
????????????</el-radio-group>
????????</el-form-item>

????????????<el-form-item?label="审批意见"?v-show="modificationval==1">
??????????????<ispInput
????????????????v-model="radiovaluer.textareavalue"
????????????????:limit="500"
????????????????:inputSpan="16"
????????????????:countSpan="6"
????????????????placeholder="请输入详细沟通结果"
??????????????></ispInput>
????????????</el-form-item>

????????????<el-form-item?label="审批意见"?v-show="modificationval==2"??prop="textareavalue"?class="textareavalue">
??????????????<ispInput
????????????????v-model="radiovaluer.textareavalue"
????????????????:limit="500"
????????????????:inputSpan="16"
????????????????:countSpan="6"
????????????????placeholder="请输入详细沟通结果"
????????????????class="textareavaluer"
??????????????></ispInput>
????????????</el-form-item>
????????????<el-form-item?label="图片上传"?>
??????????????<div?class="blockimg">
????????????????<div??class="blockimg-padding"?v-for="(fit,index)?in?fileList"?:key="index">
?????????????????????<i?class="el-icon-close"?@click="wipeimg(index)"></i>
????????????????????<el-image
??????????????????????style="width:?100px;?height:?100px"
??????????????????????:src="fit"
??????????????????????:preview-src-list="srcList"></el-image>
??????????????????</div>
??????????????</div>
???????????????<!--?on-remove移除文件列表
???????????????file-list上传的文件列表???-->
????????????????<el-upload
????????????????ref="uploadMutiple"
????????????????class="upload-demo"
????????????????:action="actionDomain '"
????????????????multiple
????????????????drag
????????????????:before-upload="beforeAvatarUpload"
????????????????:show-file-list="false"
????????????????:on-success="handleAvatarSuccess"
????????????????:file-list="fileList"
????????????????:headers="{
??????????????????token:?system_loginData.token,
????????????????}"
????????????????accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
????????????????>
??????????????????<i?class="el-icon-upload"></i>
??????????????????<div?class="el-upload__text">将图片拖到此处,或<em>点击上传</em></div>
??????????????????<div?class="el-upload__tip"?slot="tip">注:请上传jpg,jpeg,png,gif等文件格式的图片</div>

????????????????</el-upload>
??????????????</el-form-item>
??????????????<el-form-item>
?????????????????<span??class="dialog-footer?footer">
??????????????????<el-button?@click="closeDialog">取?消</el-button>
??????????????????<el-button?type="primary"?@click="check('form')">确?定</el-button>
????????????????</span>
??????????????</el-form-item>
????????</el-form>
????</el-dialog>
????</div>

上面式html代码,下面的是js代码,可以黏贴上传多张单张图片,

handlePaste(event)?{
???????????/*
?????????????ClipboardEvent?对象剪贴板被修改时发生的事件,属于?ClipboardEvent?对象。
?????????????????clipboardData 返回对象,其中包含受剪贴板操作影响的数据。
???????????*/
??????????const?items?=?(event.clipboardData?||?window.clipboardData).items;
??????????if?(!items?||?items.length?===?0)?{
??????????????this.$message.error("当前浏览器不支持本地");
??????????????return;
??????????}else{
?????????????this.file=[]
??????????}
??????????//?搜索剪切板items
??????????for?(let?i?=?0;?i?<?items.length;?i++)?{
??????????????if?(items[i].type.indexOf("image")?!==?-1)?{
??????????????????this.file.push(items[i].getAsFile())
??????????????}
??????????}
??????????for(let?i=0;i<this.file.length;i++){
??????????????if?(!this.file[i])?{
????????????????????this.$message.error("粘贴内容非图片");
????????????????????return;
????????????????}else{
??????????????????this.$refs.uploadMutiple.handleStart(this.file[i]);//?将粘贴过来的图片加入预上传队列
????????????????}
??????????}
??????????this.$refs.uploadMutiple.submit();?//?提交图片上传队列
??????},

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-08 07:59:01  更:2022-05-08 08:00:04 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 22:23:52-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码