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>
详细文档查看网站。
vue项目内嵌入到app input type=file 坑(文件上传插件)的更多相关文章
- jquery的input:type=file实现文件上传
<!DOCTYPE html> <html> <head> <title>html5_2.html</title> <style> ...
- input type="file"多图片上传 原生html传递的数组集合
单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...
- input type=file实现图片上传,预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
- input type="file" accept="image/*"上传文件慢的问题解决办法
相信大家都写过<input type="file" name="file" class="element" accept=" ...
- input type=file实现图片上传
<label for="file"> <img src="images/morende.jpg" alt=""> & ...
- input type="file"多图片上传
单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...
- Bootstrap文件上传插件File Input的使用
基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...
- 获取input type=file 的文件内容(纯文本)
一.获取input type=file 的文件内容(纯文本) 1.需求一 通过点击其他事件,来触发 文件选择框(限定格式为 .c 文件),而不是手动鼠标点击触发. [思路:] step1:将 inpu ...
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
随机推荐
- mybatis-plus简单了解
mybatis-plus入门了解和简单使用 MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发.提高效率而生. 特性: ...
- Action注入错误
2016-07-13 13:52:09,584 [ERROR]-[com.opensymphony.xwork2.util.logging.commons.CommonsLogger:38] Exce ...
- ThinkPHP5框架缺陷导致远程命令执行(POC整合帖)
摘要 近日thinkphp团队发布了版本更新https://blog.thinkphp.cn/869075 ,其中修复了一处getshell漏洞. 影响范围 5.x < 5.1.31<= ...
- vagrantfile 配置
config.vm.network "forwarded_port", guest: 22, host: 2222, id: "ssh", disabled: ...
- mysql数据库查询过程探究和优化建议
查询过程探究 我们先看一下向mysql发送一个查询请求时,mysql做了什么? 如上图所示,查询执行的过程大概可分为6个步骤: 客户端向MySQL服务器发送一条查询请求 服务器首先检查查询缓存,如果命 ...
- SAP中MM模块基础数据之Quota Arrangement(配额协议)的解析
有的时候我们的采购部门有这样的需求, 同一颗物料有几个供应商同时供料, 这个时候就涉及到一个问题, 避免出现总是和一家供应商购买物料的情况,我们需求把这些物料按照一定的比列分配给供应商.在SAP系统中 ...
- 模拟赛小结:2019-2020 ICPC, Asia Jakarta Regional Contest
比赛链接:传送门 离金最近的一次?,lh大佬carry场. Problem A. Copying Homework 00:17(+) Solved by Dancepted 签到,读题有点慢了.而且配 ...
- xhost + command not found
如下是一个示例: 原本我以为在没有联网的情况下.不能使用yum 的.可能是本地配置了yum 了吧也可以使用 1. [oracle@11GR2-test ~]$ export DISPLAY=192.1 ...
- new和delete用法小结
在C语言中是利用库函数 malloc 和 free 函数来分配和撤销内存的.C++提供了较简便而功能较强的运算符 new 和 delete 来取代 malloc 和 free 函数. new 和 de ...
- mysql语句修改zencart产品原价为特价的倍数
mysql语句修改zencart产品原价为特价的倍数,下面语句将原价设为特价的3倍: ; ;