微信浏览器点击文件上传提示没有应用可执行此操作的解决方法

德顺

发布于 2020-04-13 12:34:28

5.7K0

发布于 2020-04-13 12:34:28

文章被收录于专栏：前端资源

一个 Vue 项目，使用的 AntDesign for Vue 的前端框架。图片上传使用的 Upload 组件，在微信访问 H5 页面，点击图片上传时提示“没有应用可执行此操作”。如下图所示：

weixin_upload.png 微信浏览器点击文件上传提示没有应用可执行此操作的解决方法经验总结

实际上这不是 AntDesign 的锅，我的部分代码：

<a-upload
    class="upload-modal"
    :action="action"
    :headers="headers"
    listType="picture"
    :fileList="fileList"
    accept=".png,.jpg"
    @change="handleChange"
>

问题出在了 accept 属性上，把它删掉就行了。

使用 js 进行文件格式控制，AntDesign 的 Upload 组件有一个 :beforeUpload 属性。

官方给出的解释：上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）。注意：IE9 不支持该方法。

所以我们使用这个属性就可以了：

<a-upload
    class="upload-modal"
    :action="action"
    :headers="headers"
    listType="picture"
    :fileList="fileList"
    :beforeUpload="beforeUpload"
    @change="handleChange"
>

JS 部分：

beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      this.$message.error('请上传jpg或png格式的图片！');
    }
    return isJpgOrPng;
},

本文已加入腾讯云自媒体分享计划 (点击加入)

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

apache