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

<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;
      }

 

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueElementUI中实现文件上传需要使用ElementUI中的el-upload组件。首先需要安装ElementUI和相关插件: 1.通过 npm 安装 ElementUIvue-resource: npm install element-ui --save npm install vue-resource --save 2.在Vue项目中的main.js文件中引入ElementUIVueResource: import Vue from 'vue' import ElementUI from 'element-ui' import VueResource from 'vue-resource' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) Vue.use(VueResource) 3.在需要上传文件组件中添加el-upload组件: <template> <el-upload class="upload-demo" :headers="headers" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" :on-success="handleSuccess"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">jpg/png 文件,最大支持 2MB</div> </el-upload> </template> 其中,headers是文件上传时需要携带的请求头;handlePreview、handleRemove、beforeUpload和handleSuccess是自定义的方法。 4.在组件的script中添加自定义方法: export default { data () { return { headers: { Authorization: 'Bearer ' + sessionStorage.getItem('token') } } }, methods: { handlePreview (file) { console.log(file) }, handleRemove (file) { console.log(file) }, beforeUpload (file) { if (file.type !== 'image/png' && file.type !== 'image/jpeg') { this.$message.error('上传文件只能是jpg或png格式!') return false } if (file.size / 1024 / 1024 > 2) { this.$message.error('上传文件大小不能超过 2MB!') return false } }, handleSuccess (response, file, fileList) { console.log(response, file, fileList) } } } 在以上方法中,handlePreview、handleRemove和handleSuccess方法分别是文件预览、文件移除和文件上传成功时触发的方法;beforeUpload方法用于限制文件大小和格式。 5.最后,可以通过el-upload组件的action属性指定文件上传的处理地址: <el-upload class="upload-demo" :headers="headers" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" :on-success="handleSuccess" action="http://your-upload-url.com"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">jpg/png 文件,最大支持 2MB</div> </el-upload>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值