mac电脑使用谷歌浏览器,el-upload上传文件点击没反应

一、问题描述

在mac电脑中,使用谷歌浏览器,点击el-upload进行web端的文件上传没反应,但是有些时候使用360极速浏览器又可以,所以让我非常的莫名奇妙。

测试一直提大面积的上传功能无法使用,导致内心心力交瘁。但是主要是使用window开发的人员都没遇到过这种问题。issue去找问题,但是根本没有相关答案,让我更加怀疑自我。度娘上也都是一堆什么可以上传一次后面才不能上传的问题,好像跟我的问题对不上。后面在不断怀疑中坚定就是mac系统的某些设置导致了文件无法上传。于是我上element-ui官网上试了下可不可以上传,果然,也是不行,就更加坚定不是我自个儿代码的问题了。

最终,在不懈地努力下,终于找到了问题所在:mac系统访问文件需要获取权限

二、解决方法

基本上方法一就可以解决,如果不行,可以再试下方法二

1、方法一:系统设置

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
要实现el-upload上传文件点击预览的功能,可以通过以下步骤实现: 1. 在el-upload组件中添加一个自定义的slot,用于显示预览按钮。 2. 在handleFileChange函数中,将上传的文件保存到一个数组中,同时为每个文件生成一个唯一的id。 3. 在预览按钮的点击事件中,根据文件的id获取对应的文件内容,并将其显示在一个弹窗中。 4. 在弹窗中添加一个删除按钮,用于删除当前预览的文件。 代码示例: ``` <el-upload class="upload-demo" ref="uploadFile" :auto-upload="false" :action="testForm.actionUrl" drag :file-list="testForm.fileList" :on-change="handleFileChange" :on-remove="removeFile" :limit="1" :on-exceed="overLimitCount" > <el-button slot="trigger" size="small" type="primary">选择文件</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> <el-button slot="preview" size="small" type="text" @click="showPreview">预览</el-button> </el-upload> data() { return { testForm: { fileList: [], fileContentList: [] }, previewFileId: '', isShowPreview: false } }, methods: { handleFileChange(files, fileList) { this.testForm.fileList = fileList files.forEach(file => { const reader = new FileReader() reader.readAsText(file.raw) reader.onload = e => { const fileContent = e.target.result.replace(/\n|\r\n/g, '<br/>') this.testForm.fileContentList.push({ id: file.uid, content: fileContent }) } }) }, showPreview() { if (this.testForm.fileContentList.length > 0) { this.previewFileId = this.testForm.fileContentList[0].id this.isShowPreview = true } }, removeFile(file, fileList) { const index = this.testForm.fileContentList.findIndex(item => item.id === file.uid) if (index !== -1) { this.testForm.fileContentList.splice(index, 1) } }, removePreview() { const index = this.testForm.fileContentList.findIndex(item => item.id === this.previewFileId) if (index !== -1) { this.testForm.fileContentList.splice(index, 1) this.isShowPreview = false } } }, computed: { previewFileContent() { const file = this.testForm.fileContentList.find(item => item.id === this.previewFileId) return file ? file.content : '' } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小马甲丫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值