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. 比特(bit)和字节(Byte)

    比特(bit)和字节(Byte) 基础的内容就不说了,这里是一个小的学习笔记 比特和字节的写法差异与应用场景 标准的写法中,正如标题中写的那样,是通过大小写来区分比特和字节的:比特的b应该是小写,而字 ...

  2. mysql设计与优化以及数据库表设计与表开发规范

    一.设计问题? 1.主键是用自增还是UUID ? Innodb 中的主键是聚簇索引. 如果主键是自增的,那么每次插入新的记录,记录就会顺序添加到当前索引节点的后续位置,当一页写满,就会自动开辟一个新的 ...

  3. 19 Python之面向对象(成员)

    1. 成员 在类中你能写的所有内容都是类的成员 2. 变量 1. 实例变量: 由对象去访问的变量. class Person: def __init__(self, name, id, gender, ...

  4. vue-resource 全局拦截器

    项目中可能会添加超时登录的功能,因此根据tokenid 判断是否超时.如果token已过期,需要跳转至登录页面. 因此需要用到全局拦截器拦截返回的状态 //下边代码添加在main.js中 Vue.ht ...

  5. Linu目录结构和创建用户

    具体目标结构 ./bin [重点] (/usr/bin./usr/local/bin) ●是Binary的速写,这个目录存放着最经常使用的命令. ./sbin (/usr/sbin./usr/loca ...

  6. PAT Basic 1093 字符串A+B (20 分)

    给定两个字符串 A 和 B,本题要求你输出 A+B,即两个字符串的并集.要求先输出 A,再输出 B,但重复的字符必须被剔除. 输入格式: 输入在两行中分别给出 A 和 B,均为长度不超过 1的.由可见 ...

  7. jmeter通过if控制器控制业务比例

    以发帖,看帖,回帖三个事物为例,这里就10个用户跑10次,进行测试下: 可以看到看帖,回帖,发帖比例是5:3:2,先来说说怎么做到的,就是通过if控制器,分别来看下几个控制器的内容, 看帖(if控制器 ...

  8. H5 2次重定向301

    测试环境http ,生产https,导致请求重定向.加之H5自己的一次请求重定向,一共2次.

  9. 关于Mongodb的其他知识

    Mongodb支持的数据类型 数据类型 描述 String 字符串.存储数据常用的数据类型.在 MongoDB 中,UTF-8 编码的字符串才是合法的. Integer 整型数值.用于存储数值.根据你 ...

  10. Android 腾讯bugly Tinker 热修复

    Bugly热更新是腾讯推出的热更新框架,热更新是指无需到应用市场重新下载安装app,只需要在app内下载补丁包即可实现app的更新,主要用于app的bug修复或者少量改动. 大家在使用app(特别是游 ...