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