• vue项目内嵌入到app input type=file 坑(文件上传插件)


    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>
    View Code

    详细文档查看网站。

  • 相关阅读:
    Ruby系列:玩转闭包(Block,Proc,lambda)
    C# 中where关键字【MSDN】
    web应用程序中慎用static变量
    面向对象的javascript(一)
    原型模式 对象深浅复制
    存储过程:异地备份数据库文件
    正则表达式 [笔记]
    连接Oracle数据库代码
    在Eclipse下搭建Android开发环境教程,HelloWord
    Android开发之旅:环境搭建及HelloWorld
  • 原文地址:https://www.cnblogs.com/lst619247/p/11737511.html
Copyright © 2020-2023  润新知