w问题描述：

　　我用vue-cli完成的一个移动端项目，内嵌到app当中，用原生的input type=file 来完成文件上传。在安卓下没有问题但是在苹果手机 上传第二次手机就会发生白屏 并无缘无故跳转。

具体原因尚未发现。

解决办法：

　　引用了一个vue的插件：https://lian-yue.github.io/vue-upload-component/#/zh-cn/documents#入门开始；这个是插件地址，具体使用方法以及返回值都会有一定描述，

如果有人知道具体原因 欢迎留言。

示例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Vue-upload-component Test</title>
  6.   <script src="https://unpkg.com/vue"></script>
  7.   <script src="https://unpkg.com/vue-upload-component"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11.   <ul>
  12.     <li v-for="file in files">{{file.name}} - Error: {{file.error}}, Success: {{file.success}}</li>
  13.   </ul>
  14.   <file-upload
  15.     ref="upload"
  16.     v-model="files"
  17.     post-action="/post.method"
  18.     put-action="/put.method"
  19.     @input-file="inputFile"
  20.     @input-filter="inputFilter"
  21.   >
  22.   上传文件
  23.   </file-upload>
  24.   <button v-show="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" type="button">开始上传</button>
  25.   <button v-show="$refs.upload && $refs.upload.active" @click.prevent="$refs.upload.active = false" type="button">停止上传</button>
  26. </div>
  27. <script>
  28. new Vue({
  29.   el: '#app',
  30.   data: function () {
  31.     return {
  32.       files: []
  33.     }
  34.   },
  35.   components: {
  36.     FileUpload: VueUploadComponent
  37.   },
  38.   methods: {
  39.     /**
  40.      * Has changed
  41.      * @param  Object|undefined   newFile   只读
  42.      * @param  Object|undefined   oldFile   只读
  43.      * @return undefined
  44.      */
  45.     inputFile: function (newFile, oldFile) {
  46.       if (newFile && oldFile && !newFile.active && oldFile.active) {
  47.         // 获得相应数据
  48.         console.log('response', newFile.response)
  49.         if (newFile.xhr) {
  50.           //  获得响应状态码
  51.           console.log('status', newFile.xhr.status)
  52.         }
  53.       }
  54.     },
  55.     /**
  56.      * Pretreatment
  57.      * @param  Object|undefined   newFile   读写
  58.      * @param  Object|undefined   oldFile   只读
  59.      * @param  Function           prevent   阻止回调
  60.      * @return undefined
  61.      */
  62.     inputFilter: function (newFile, oldFile, prevent) {
  63.       if (newFile && !oldFile) {
  64.         // 过滤不是图片后缀的文件
  65.         if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
  66.           return prevent()
  67.         }
  68.       }
  69.  
  70.       // 创建 blob 字段 用于图片预览
  71.       newFile.blob = ''
  72.       let URL = window.URL || window.webkitURL
  73.       if (URL && URL.createObjectURL) {
  74.         newFile.blob = URL.createObjectURL(newFile.file)
  75.       }
  76.     }
  77.   }
  78. });
  79. </script>
  80. </body>
  81. </html>

详细文档查看网站。

vue项目内嵌入到app input type=file 坑（文件上传插件）的更多相关文章

  1. jquery的input:type=file实现文件上传

    <!DOCTYPE html> <html> <head> <title>html5_2.html</title> <style> ...

  2. input type="file"多图片上传 原生html传递的数组集合

    单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...

  3. input type=file实现图片上传，预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  4. input type="file" accept="image/*"上传文件慢的问题解决办法

    相信大家都写过<input type="file" name="file" class="element" accept=" ...

  5. input type=file实现图片上传

    <label for="file"> <img src="images/morende.jpg" alt=""> & ...

  6. input type="file"多图片上传

    单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...

  7. Bootstrap文件上传插件File Input的使用

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...

  8. 获取input type=file 的文件内容（纯文本）

    一.获取input type=file 的文件内容(纯文本) 1.需求一 通过点击其他事件,来触发 文件选择框(限定格式为 .c 文件),而不是手动鼠标点击触发. [思路:] step1:将 inpu ...

  9. 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

随机推荐

  1. [转]Opcode是啥以及如何使用好Opcache

    转载链接:Opcode是啥以及如何使用好Opcache 啥是Opcode? 我们在日常的PHP开发过程中,应该经常会听见Opcache这个词,那么啥是Opcode呢? Opcache 的前生是 Opt ...

  2. 08 Json结构化Datetime时间以及保留中文

    错误描述: import json import datetime a = datetime.datetime.now() print(a) b = json.dumps(a) print(b) 如上 ...

  3. Redis主从配置以及哨兵模式

    Redis主从模式,应用写master,读slave,减轻master的压力. 配置主结点: daemonize yes port 6379bind 0.0.0.0 pidfile /opt/redi ...

  4. deep_learning_LSTM长短期记忆神经网络处理Mnist数据集

    1.RNN(Recurrent Neural Network)循环神经网络模型 详见RNN循环神经网络:https://www.cnblogs.com/pinard/p/6509630.html 2. ...

  5. jQuery获取兄弟标签的文本

    // 一个div里面有一个span标签和多个button标签,每个button标签都有id,span标签没有id,通过点击其中一个button标签,来获取到span标签的text function ( ...

  6. Java注解demo

    # 为了熟悉了解注解,写的一个小demo# demo的主要功能是扫描一个class中的包含我们自定义注解的方法,然后把他们的返回值放到一个map中 public class QQ { public s ...

  7. win10上使用自带的Hyper-V安装虚拟机

    Hyper-V管理器,新建虚拟机,安装了.iso系统,但启动报错,电脑上联想G40-70,都说在bios设置的security里开启硬件虚拟化选项,可我security里没有虚拟化相关选项, 后来在 ...

  8. STL源码阅读-functor与adapter

    为什么要用仿函数 函数指针不灵活,难以与STL其他组件配合使用 Adapter 将一个class的接口转换为另一个class的接口,使原本因接口不兼容而不能合作的classes,可以一起运作 STL中 ...

  9. Centos7基础优化操作项

    1.基础优化操作项:更新yum源信息第一个:就近使用yum源地址,安装软件更快.curl -s -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors. ...

  10. 对Spring Boot 及Mybatis简单应用

    因为没有系统的学习过SpringBoot,在对照一个别人的SpringBoot项目,进行简单的搭建及使用. 1.首先创建SpringBoot项目之后,这里会有默认的启动类,基本不需要配置,在类的上边有 ...