zoukankan      html  css  js  c++  java
  • 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

    详细文档查看网站。

  • 相关阅读:
    SqlServer 查看数据库中所有存储过程
    SqlServer 查看数据库中所有视图
    SqlServer 查询表的详细信息
    SqlServer 遍历修改字段长度
    net core 操作Redis
    Tuning SharePoint Workflow Engine
    Open With Explorer
    Download language packs for SharePoint 2013
    Change Maximum Size For SharePoint List Template when Saving
    Six ways to store settings in SharePoint
  • 原文地址:https://www.cnblogs.com/lst619247/p/11737511.html
Copyright © 2011-2022 走看看