一个 Vue 项目,使用的 AntDesign for Vue 的前端框架。图片上传使用的 Upload 组件,在微信访问 H5 页面,点击图片上传时提示“没有应用可执行此操作”。如下图所示:
实际上这不是 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; },
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/231447.html