vue上传文件组件使用_uniapp支持ios文件上传

vue上传文件组件使用_uniapp支持ios文件上传imgList:[],size:0,limit:undefined}},methods:{//设置fileClick(){document.getElementById(‘upload_file’).click()},fileChange(el){if(!el.target.files[0].size)returnthis.fileList(el.target)el.target.value=‘’},fileList(fileList){letfil

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

imgList: [],

size: 0,

limit: undefined

}

},

methods: {

// 设置

fileClick() {

document.getElementById(‘upload_file’).click()

},

fileChange(el) {

if (!el.target.files[0].size) return

this.fileList(el.target)

el.target.value = ‘’

},

fileList(fileList) {

let files = fileList.files

for (let i = 0; i < files.length; i++) {

// 判断是否为文件夹

// eslint-disable-next-line eqeqeq

if (files[i].type != ‘’) {

this.fileAdd(files[i])

} else {

// 文件夹处理

this.folders(fileList.items[i])

}

}

},

// 文件夹处理

folders(files) {

let _this = this

// 判断是否为原生file

if (files.kind) {

files = files.webkitGetAsEntry()

}

files.createReader().readEntries(function(file) {

for (let i = 0; i < file.length; i++) {

if (file[i].isFile) {

_this.foldersAdd(file[i])

} else {

_this.folders(file[i])

}

}

})

},

foldersAdd(entry) {

let _this = this

entry.file(function(file) {

_this.fileAdd(file)

})

},

fileAdd(file) {

if (this.limit !== undefined) this.limit–

if (this.limit !== undefined && this.limit < 0) return

// 总大小

this.size = this.size + file.size

// 判断是否为图片文件

// eslint-disable-next-line eqeqeq

if (file.type.indexOf(‘image’) == -1) {

file.src = ‘wenjian.png’

this.imgList.push({

file

})

} else {

let reader = new FileReader()

let image = new Image()

let _this = this

reader.readAsDataURL(file)

reader.onload = function() {

file.src = this.result

image.onload = function() {

let width = image.width

let height = image.height

file.width = width

file.height = height

_this.imgList.push({

file

})

console.log(_this.imgList)

}

image.src = file.src

}

}

},

fileDel(index) {

this.size = this.size – this.imgList[index].file.size // 总大小

this.imgList.splice(index, 1)

if (this.limit !== undefined) this.limit = this.imgList.length

},

bytesToSize(bytes) {

if (bytes === 0) return ‘0 B’

let k = 1000 // or 1024

let sizes = [‘B’, ‘KB’, ‘MB’, ‘GB’, ‘TB’, ‘PB’, ‘EB’, ‘ZB’, ‘YB’]

let i = Math.floor(Math.log(bytes) / Math.log(k))

return (bytes / Math.pow(k, i)).toPrecision(3) + ’ ’ + sizes[i]

}

}

}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/170649.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • java工程师笔试面试题[通俗易懂]

    java工程师笔试面试题[通俗易懂]1.J2EE是什么?它包括哪些技术?解答:从整体上讲,J2EE是使用Java技术开发企业级应用的工业标准,它是Java技术不断适应和促进企业级应用过程中的产物.适用于企业级应用的J2EE,提供一个平台独立的、可移植的、多用户的、安全的和基于标准的企业级平台,从而简化企业应用的开发、管理和部署。J2EE是一个标准,而不是一个现成的产品。主要包括以下这些技术:1)Ser

    2022年7月11日
  • linux命令手册 apk_linux命令全集

    linux命令手册 apk_linux命令全集linux手册app是一款学习教育应用,是个能让你快速查询linux命令的手机软件。此外在linux手册app中还有学习手册,让你可随时查询不清楚的知识点。基本简介linux手册包app含linux命令速查以及一个linux简易学习教程,是学习linux必备宝典,命令速查可以快速知道linux命令使用方法,并且配有学习手册,方便及时查阅不懂知识。功能介绍1,linux简易教程方便随时阅读2,命令搜…

    2022年9月14日
  • GHO文件转iso文件能启动安装

    GHO文件转iso文件能启动安装言:目前网上流传的gho转iso教程都是用ultraiso替换gho文件的方法,但是这种方法经过实际使用存在两个缺陷,1.只适用XP,超过800M的时候替换会提示升级DVD格式,但是升级之后会导致不能启动,不升级无法替换,2.不能有效的控制启动盘的来源,只能找别人做好的进行替换鉴于以上两点,有必要重新找个方法准备工具1.IT天空的PE制作工具下载地址2.win7的gho文件下载地址:3.winISO下载地址:http://lt2.mqego.com/soft1/winiso

    2022年7月13日
  • sql: 分组后按照分组规则拼接字符串 — group by与 group_concat()

    sql: 分组后按照分组规则拼接字符串 — group by与 group_concat()Markdown编辑器写博客小技巧本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗Ctrl+B斜体Ctrl+I引…

    2022年5月23日
  • android编写单元测试用例,Android 简单的单元测试用例

    android编写单元测试用例,Android 简单的单元测试用例开发中单元测试是必不可少的。简单的一个测试用例。1.在Mainfest进行相关属性的注册。package=”com.test”android:versionCode=”1″android:versionName=”1.0″>android:targetPackage=”com.test”android:name=”android.test.InstrumentationTestRunner…

    2022年6月16日
  • unittest自动化测试框架_unittest批量加载用例

    unittest自动化测试框架_unittest批量加载用例目录一、unittest简介二、基本概念三、unittest基础使用四、unitteest提供的各种断言方式五、unittest测试用例跳过执行六、总结一、unittest简介测试框架-unittest,相当于是一个python版的junit。python里面的单元测试框架除了unittest,还有一个pytest框架,这个实际上用的比较少,后面有空再继续介绍和分享。unittest单元测试框架不仅可以适用于单元测试,还可以适用WEB自动化测试用例的

    2022年10月14日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号