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. Entity Framework Core Relationship的学习笔记

    说明 此例筛选了感兴趣及常用部分 参考文献 https://docs.microsoft.com/en-us/ef/core/modeling/relationships One to Many Ma ...

  2. 常用的TCP/UDP端口

    已知的TCP/UDP端口可以在wikipedia上找到: List of TCP and UDP port numbers, 太多了,按组列举了最常用的,如下: FTP:21SSH:22Telnet: ...

  3. laravel 5.7 引入Illuminate\Http\Request 在类内调用 Request 提示不存在的问题

    laravel报错: ReflectionException Class App\Http\Controllers\Request does not exist 解决办法: namespace App ...

  4. JavaScript快速排序法实现数组排序

    大致分三步: 1.找基准(一般是以中间项为基准) 2.遍历数组,小于基准的放在left,大于基准的放在right 3.递归 var arr = [10,8,6,9,1,7,1,13,5,1,9]; / ...

  5. js判断变量是否为undefined

    可能很多朋友认为undefined是在js中未定义变量时才会提示的错误,其实不然undefined 是js中的一特殊的变量,我们也可以提前定义哦,下面我来介绍js undefined 用法. Java ...

  6. 使用OpenSSL生成RSA秘钥对并对文件加解密

    生成RSA私钥 openssl genrsa -out rsa.key 1024 生成RSA公钥 openssl rsa -in rsa.key -pubout -out pub.key 创建明文文件 ...

  7. LVS DR模型RS端修改配置脚本

    #!/bin/bash vip=x.x.x.x in start) > /proc/sys/net/ipv4/conf/all/arp_ignore > /proc/sys/net/ipv ...

  8. mybatis在spring(Controller) 中的事务配置问题

    这两天一直在折腾一个小工具,非常简单的移动端webapp. 用的是jquery mobile + ssm. 写的差不多的时候,想到解决事务问题,本来以为非常简单,只要在配置文件中加上相应的mybati ...

  9. 学习Linux让我进入了知名企业 原

    说起我学习Linux的原因是多方面的,大学时我学的是物理学师范专业,有部分计算机课程,但我觉得这些课程没什么实际作用,我自己对计算机比较感兴趣,我利用业余时间学习了很多计算机技术.在大学期间我参加了很 ...

  10. linux内核配置与编译

    配置内核:配置硬件和软件需的部分. make config:基于文本模式的交互式配置.(一问一答) make menuconfig:基于文本模式菜单性配置.(直观简单高效) <*>会产生b ...