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. SQLAlchemy技术手册

    一.ORM 框架简介 对象-关系映射(Object/Relation Mapping,简称ORM),是随着面向对象的软件开发方法发展而产生的.面向对象的开发方法是当今企业级应用开发环境中的主流开发方法 ...

  2. IOS手机伪类a:active失效

    IOS手机伪类a:active失效:点击更改颜色,松开恢复 解决方案:OS系统的移动设备中,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态 docume ...

  3. numpy中与高等数学有关的函数

    1.方阵的迹 方阵的迹就是方阵的主对角线元素之和 # -*- coding:utf-8 -*- # @Author: WanMingZhu # @Date: 2019/8/12 9:37 import ...

  4. 5.flask与数据库

    1.安装postgresql 注意:在flask中,操作数据库还是通过orm调用驱动来操作.sqlalchemy是python下的一款工业级的orm,比Django自带的orm要强大很多,至于什么类型 ...

  5. server version for the right syntax to use near 'USING BTREE 数据库文件版本不合导致的错误

    MySQL 返回:#1064 - You have an error in your SQL syntax; check the manual that corresponds to your MyS ...

  6. Open cup #2

    A D:用前面的H去消去后面的K 然后求最长连续的M F:在每一列/行里面求最大的数然后组成最大的和ans[]里的比求出最大的 L:并查集 J:DP背锅题 01背包 先求出M种里每种的size和las ...

  7. jenkins之Extended Choice Parameter多选插件

  8. 并发编程的锁机制：synchronized和lock

    1. 锁的种类 锁的种类有很多,包括:自旋锁.自旋锁的其他种类.阻塞锁.可重入锁.读写锁.互斥锁.悲观锁.乐观锁.公平锁.可重入锁等等,其余就不列出了.我们重点看如下几种:可重入锁.读写锁.可中断锁. ...

  9. CSS 多行省略失效 (-webkit-box-orient 失效) Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.

    webpck不能编译这个属性-webkit-box-orient: vertical https://github.com/fanyifanbumaimeng/Articles/issues/48 / ...

  10. autofs 自动挂载.

    autofs 自动挂载. 操作环境:redhat 6 一.autofs 说明 自动挂载器是一个监视目录的守护进程,并在目标子目录被引用时,自动执行预定义的挂载 自动挂载器由autofs服务脚本管理 自 ...