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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • linux(11)配置环境变量[通俗易懂]

    linux(11)配置环境变量[通俗易懂]前言在自定义安装软件的时候,经常需要配置环境变量,下面进行详细解析&nbsp;环境变量配置文件|用户|配置文件||:|:||系统环境|/ect/profil

    2022年7月28日
    5
  • 机器学习中最常见的四种分类模型

    机器学习中最常见的四种分类模型点击蓝字关注我,有干货领取!作者:JasonBrownlee翻译:候博学前言机器学习是一个从训练集中学习出算法的研究领域。分类是一项需要使用机器学习算法的任务,该算法学习如何为数据集…

    2022年10月5日
    1
  • 0 can’t find referenced pointcut aApplogic

    0 can’t find referenced pointcut aApplogic0 can’t find referenced pointcut aApplogic

    2022年4月24日
    45
  • ideaspringboot启动_idea运行不出结果

    ideaspringboot启动_idea运行不出结果idea解决Command line is too long. Shorten command line for ServiceStarter or also for Application报错1.在IDEA里找到”.idea===>workspace.xml”2.找到,在里面添加即可

    2022年8月19日
    20
  • viewstate解密

    viewstate解密看完之后,觉得能不用viewstate就不用,再者像这样viewstate[“a”]=”b”;这种简单的赋值是没有什么关系的,它生成的树是很小的,altas一定是用js修改了viewstate的,但方法肯定是加密再加密的,效率也应该很低. ViewState是.Net中提出的状态保存的一种新途径(实际上也是老瓶装新酒);我们知道,传统的Web程序保存状态的方式有这样几种: 1、Appli

    2022年7月21日
    24
  • 电商项目数据库表的学习及数据库表结构设计

    电商项目数据库表的学习及数据库表结构设计数据库表知识的学习查阅了许多资料,也看了许多此类的文章与得到了老师的教导;总结出以下结论:表中的id字段不用加上表名,直接写id就好了。 表中一般不使用驼峰式命名,用“_”连接就好了,单词多的黏一起就好。 一般表中除了id字段还要存在以下基本字段 字段注释尽量要大写 表里一般写完id后是标题,再是关联的某个表id之类 当出现多对多关系时,就要做个处理不能直接两表关联;有两种方式:一是创建一个中间表;二是一个表id和需关联的表id常见的电商数据库表结构 横幅表(用于自动展示图片).

    2025年8月30日
    4

发表回复

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

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