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>
详细文档查看网站。