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)
上一篇 2022年8月15日 下午11:00
下一篇 2022年8月15日 下午11:16


相关推荐

  • GIMP 2.10教程「建议收藏」

    GIMP 2.10教程「建议收藏」更新一下(2020-12-27),有大神刚完成人工翻译,质量很好,地址在此:https://www.ycproject.cn/gimp/gimp.html下文可以忽略了GIMP_2.10中文教程(谷歌机翻)GIMP是全平台(桌面)下的Photoshop,专门处理图片的。先放原文地址:https://docs.gimp.org/2.10/zh_CN/(基于2.10.18版)GIMP中文教程太少了,搜了一大圈找到一个靠谱点全一点的,是@笨⼩璀在2014年基于2012年的2.8版翻译的,翻译

    2022年6月17日
    29
  • Linux命令之mv命令

    Linux命令之mv命令mv 命令是 move 的缩写 可以用来移动文件或者将文件改名 move rename files 命令格式 mv 选项 源文件或目录目标文件或目录 nbsp nbsp nbsp nbsp 1 当 mv 命令中的第二个参数类型 目标 是文件时 实现重命名源文件或目录的功能 记住这里源文件或目录只能有一个 因为如果有多个时 会存在命名冲突的问题 nbsp amp nbs

    2026年3月17日
    2
  • jmeter线程组的属性_netty线程模型详解

    jmeter线程组的属性_netty线程模型详解情境:最近用winform做一个小程序,主要是用来执行一些sql语句,无奈数据量太大,执行一次要二十分钟左右,执行期间界面根本不能再进行其它操作,就连最小化窗口都不行,一动就跟死机差不多了.因此到网上搜了一下,找到.net后台线程的概念.(高手请绕道!)前台线程和后台线程之间的选择.NETFramework中的所有线程都被指定为前台线程或后台线程。这两种线程唯一的区别是—后台线程不会

    2022年10月11日
    3
  • python3·7创建虚拟环境_python激活虚拟环境

    python3·7创建虚拟环境_python激活虚拟环境Centos7安装Python3,创建python3虚拟环境

    2025年11月12日
    4
  • datagrip2021激活码【注册码】

    datagrip2021激活码【注册码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月19日
    141
  • 最小二乘法详解_通俗是啥意思

    最小二乘法详解_通俗是啥意思本文转自https://blog.csdn.net/bitcarmanlee/article/details/51589143,谢谢原作者辛苦整理。若侵权,告知即删。最小二乘是每个上过大学的同学都接触过的概念与知识点(当然可能纯文科的同学没接触过,但是一般纯文科的同学也不会看这篇文章好像)。最小二乘理论其实很简单,用途也很广泛。但是每次说到最小二乘,总感觉差了点什么似的,好像对于最小二乘的前世…

    2022年8月30日
    4

发表回复

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

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