Vue项目使用element中upload组件的http-request自定义上传文件问题及限制文件类型

在Vue项目中,使用Element UI的Upload组件时遇到文件类型限制问题。原来设置的jpeg、jpg、png、docx等类型未能有效阻止webp图片上传。通过在before-remove钩子和http-request中添加文件类型检查,实现了上传前的校验。当文件类型不符合要求时,直接移除文件,避免了无效上传。后续计划自定义弹框来增强用户体验。
摘要由CSDN通过智能技术生成

在修改项目的时候,发现之前项目是对文件类型限制jpeg、jpg、png、docx、mp4、ppt、pdf,结果没有限制住类型,上传webp图片时也可以进行上传。然后在修改的过程中发现,因为我添加了before-remove移除之前钩子函数,然后添加上传之前对文件类型校验时候,若符合就上传成功,否则移除弹框弹出进行删除,目前我去掉了二次确认删除弹框,参考代码:

<el-upload
   class="upload-file"
   action
   :before-upload="beforeUpload"
   :before-remove="beforeRemove"
   :http-request="selectPicUpload"
   :file-list="fileList"
   accept=".jpg,.png,jpeg,.pdf,.ppt,.mp4"
 >
   <el-button
     size="small"
     type="primary"
     icon="el-icon-upload2"
     class="upload-file-btn"
     >点击上传</el-button
   >
   <div slot="tip" class="el-upload__tip">
     (可上传jpg/png/pdf/ppt/doc/docx/mp4文件,
     &nbsp;上传文件需小于500M)
   </div>
 <
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui的upload组件提供了`http-request`属性,用于自定义上传文件的方法。这个方法会接收三个参数:文件对象、上传地址和附加参数。下面是一个简单的例子: ```html <el-upload action="/upload" :http-request="uploadFile" :on-success="onSuccess" :on-error="onError" drag multiple> </el-upload> ``` ```javascript methods: { uploadFile(file, params) { const formData = new FormData() formData.append('file', file) formData.append('name', params.name) return axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) }, onSuccess(response, file, fileList) { console.log('上传成功', response, file, fileList) }, onError(error, file, fileList) { console.log('上传失败', error, file, fileList) } } ``` 在上面的例子,我们定义了一个`uploadFile`方法,接收文件对象和附加参数,使用`axios`发送一个POST请求,将文件和参数放在`FormData`里面,设置`Content-Type`为`multipart/form-data`,最后返回一个Promise对象。 在`on-success`和`on-error`事件,我们可以处理上传成功或失败的情况。其,`on-success`会接收三个参数:响应数据、文件对象和当前文件列表;`on-error`会接收两个参数:错误对象和当前文件对象。 需要注意的是,`http-request`方法必须返回一个Promise对象,并且必须在上传成功或失败时调用`resolve`或`reject`方法,否则上传状态可能会出现异常。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值