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 坑（文件上传插件）的更多相关文章

  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. 客户端相关知识学习（五）之什么是webView

    webview是什么?作用是什么?和浏览器有什么关系? Android系统中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装为一个叫做 WebView 组件也就是说WebView是一个基 ...

  2. JS基础_强制类型转换-Boolean

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 在 React 组件中使用 Refs 指南

    原文:Fullstack React's Guide to using Refs in React Components作者:Yomi Eluwande译者:博轩 译文:https://segment ...

  4. P1:天文数据获取

    Step1:在sloan的casjob里http://casjobs.sdss.org/CasJobs/,密码用户 jiangbin  123456 查询满足条件的光谱对象,得到光谱对象的plate, ...

  5. 数据绘图工具之Matplotlib

    一.安装:绘图和可视化 pip install matplotlib 我们已经下好了anaconda 包含了绘图工具包 直接导入即可 import matplotlib.pyplotlib as pl ...

  6. Linux——Session复制中的失败的可能原因之一

    组播地址问题 route add -net 224.0.0.0 netmask 240.0.0.0 dev eno16777728(自己的网卡名)

  7. Hive 函数（六）

    Hive函数 ​ Hive中提供了非常丰富的运算符和内置函数支撑,具体操作如下: 1.内置运算符 1.1关系运算符 运算符 类型 说明 A = B 所有原始类型 如果A与B相等,返回TRUE,否则返回 ...

  8. keras多gpu训练

    使用multi_gpu_model即可.观察了一下GPU的利用率,非常的低,大部分时候都是0,估计在相互等待,同步更新模型: 当然了,使用多GPU最明显的好处是可以使用更大的batch size im ...

  9. struts2 JSON 插件的使用

    1. 导入包: json-lib-2.3-jdk15.jar struts2-json-plugin-2.3.15.3.jar 2. 在struts.xml中修改配置如下: <package n ...

  10. java 学习笔记（五） Zookeeper的集群配置和Java测试程序

    参考博客 http://blog.csdn.net/catoop/article/details/50848555 http://blog.csdn.net/randompeople/article/ ...