Vue elementUI Upload只支持上传音频格式的文件

最新推荐文章于 2025-06-18 10:13:17 发布

飞羽轩

最新推荐文章于 2025-06-18 10:13:17 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

文章标签： VUe ElementUI Upload上传音频

本文链接：https://blog.youkuaiyun.com/weixin_42679187/article/details/89140188

本文介绍如何使用Element UI的upload组件实现文件上传功能，并通过beforeAvatarUpload方法限制用户仅能上传mp3格式的音频文件。当用户尝试上传非mp3格式文件时，将显示错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-upload
     ref="replaceUploader"
     :file-list="replaceList"
     v-model="newChapter.title"
     class="avatar-uploader"
     action="/file/upload"
     :limit="1"
     :show-file-list="true"
     :on-success="handleReplaceAvatarSuccess"
     :on-exceed="handleExceed"
     :beforeUpload="beforeAvatarUpload">
      <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

然后在methods方法中做上传文件的限制

 /**
     *上传文件限制--只能上传mp3格式的文件
     */
      beforeAvatarUpload(file) {
         var testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
         const extension = testmsg === 'mp3'
         if(!extension){
           this.$message({
             message:"上传文件只能是mp3格式！",
             type:'error'
           })
         }
         return extension;
      }