vue项目内嵌入到app input type=file 坑(文件上传插件)
时间:2019-10-25
本文章向大家介绍vue项目内嵌入到app input type=file 坑(文件上传插件),主要包括vue项目内嵌入到app input type=file 坑(文件上传插件)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
w问题描述:
我用vue-cli完成的一个移动端项目,内嵌到app当中,用原生的input type=file 来完成文件上传。在安卓下没有问题但是在苹果手机 上传第二次手机就会发生白屏 并无缘无故跳转。
具体原因尚未发现。
解决办法:
引用了一个vue的插件:https://lian-yue.github.io/vue-upload-component/#/zh-cn/documents#入门开始;这个是插件地址,具体使用方法以及返回值都会有一定描述,
如果有人知道具体原因 欢迎留言。
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue-upload-component Test</title> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vue-upload-component"></script> </head> <body> <div id="app"> <ul> <li v-for="file in files">{{file.name}} - Error: {{file.error}}, Success: {{file.success}}</li> </ul> <file-upload ref="upload" v-model="files" post-action="/post.method" put-action="/put.method" @input-file="inputFile" @input-filter="inputFilter" > 上传文件 </file-upload> <button v-show="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" type="button">开始上传</button> <button v-show="$refs.upload && $refs.upload.active" @click.prevent="$refs.upload.active = false" type="button">停止上传</button> </div> <script> new Vue({ el: '#app', data: function () { return { files: [] } }, components: { FileUpload: VueUploadComponent }, methods: { /** * Has changed * @param Object|undefined newFile 只读 * @param Object|undefined oldFile 只读 * @return undefined */ inputFile: function (newFile, oldFile) { if (newFile && oldFile && !newFile.active && oldFile.active) { // 获得相应数据 console.log('response', newFile.response) if (newFile.xhr) { // 获得响应状态码 console.log('status', newFile.xhr.status) } } }, /** * Pretreatment * @param Object|undefined newFile 读写 * @param Object|undefined oldFile 只读 * @param Function prevent 阻止回调 * @return undefined */ inputFilter: function (newFile, oldFile, prevent) { if (newFile && !oldFile) { // 过滤不是图片后缀的文件 if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) { return prevent() } } // 创建 blob 字段 用于图片预览 newFile.blob = '' let URL = window.URL || window.webkitURL if (URL && URL.createObjectURL) { newFile.blob = URL.createObjectURL(newFile.file) } } } }); </script> </body> </html>
详细文档查看网站。
原文地址:https://www.cnblogs.com/lst619247/p/11737511.html
- 如何解决分布式系统中的跨时区问题[实例篇]
- Visual Studio对程序集签名时一个很不好用的地方
- 一个关于解决序列化问题的编程技巧
- [WCF权限控制]从两个重要的概念谈起:Identity与Principal[上篇]
- 从数据到代码——通过代码生成机制实现强类型编程[下篇]
- 谈谈你最熟悉的System.DateTime[下篇]
- 如何解决EnterLib异常处理框架最大的局限——基于异常"类型"的异常处理策略
- [WCF权限控制]从两个重要的概念谈起:Identity与Principal[下篇]
- 收藏!6道常见hadoop面试题及答案解析
- 这是EnterLib PIAB的BUG吗?
- [WCF权限控制]基于Windows用户组的授权方式[上篇]
- EnterLib PIAB又一个BUG?
- 关于WCF的一个非常“无语”的BUG!
- 谈谈分布式事务之一:SOA需要怎样的事务控制方式
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 时间序列&日期学习笔记大全(上)
- LeetCode 题解:一顿操作猛如虎,一看击败百分五
- 这是什么沙雕题目?测试用例居然有人身高为 0 ??
- 深入解读flink sql cdc的使用以及源码分析
- markdown mermaid 画图
- 面试汇总(五):操作系统常见面试总结(一):进程与线程的相关知识点
- 面试汇总(六):操作系统常见面试总结(二):系统相关的问题
- Android 利用V4L2 调用camera
- Android基础--利用ANativeWindow显示视频
- Python如何爬取b站热门视频并导入Excel
- 代码详解——改变控制器的参考速度
- Python爬虫之JS的解析
- Python爬虫之chrome在爬虫中的使用
- Python爬虫之打码平台的使用
- Python爬虫---爬取腾讯动漫全站漫画