simple uploader 对上传文件校验

simpleuploader的具体使用方法看官方文档,这里记录一下对上传的文件的校验

<uploader :options="options"
              :file-status-text="statusText"
              class="uploader-example"
              ref="uploader"
              @file-added="onFileAdded"
              @complete="complete"
              @file-progress="onFileProgress"
              @file-complete="fileComplete">
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <uploader-btn id="global-uploader-btn"
                      ref="uploadBtn"
                      :single="true"
                      :attrs="attrs">选择文件</uploader-btn>
      </uploader-drop>
      <uploader-list></uploader-list>
    </uploader>
...
methods:{
    onFileAdded (file) {
        // 获取上传文件的后缀名
      let extname = file.getExtension();
      if (extname !== 'mp4') {
        this.$message('请选择MP4文件')
        file.cancel()
        return false;
      }
    },
}
...

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Vue Simple Uploader 是一个简单易用的 Vue.js 文件上传插件,其实现文件上传的步骤如下: 1. 安装 vue-simple-uploader 插件,可以使用 npm 或者 yarn 安装: ```bash npm install vue-simple-uploader # 或者 yarn add vue-simple-uploader ``` 2. 在 Vue.js 组件中引入并注册 vue-simple-uploader 插件: ```javascript import Vue from 'vue' import VueSimpleUploader from 'vue-simple-uploader' Vue.use(VueSimpleUploader) ``` 3. 在模板中使用 vue-simple-uploader 组件,并设置相关属性,例如: ```html <template> <div> <h2>文件上传</h2> <vue-simple-uploader ref="uploader" :url="uploadUrl" :headers="headers" :params="params" :chunk-size="chunkSize" :max-file-size="maxFileSize" :concurrent="concurrent" :accept="accept" @before-upload="beforeUpload" @progress="onProgress" @success="onSuccess" @error="onError" @complete="onComplete" @abort="onAbort" > <button>选择文件</button> </vue-simple-uploader> </div> </template> <script> export default { data() { return { uploadUrl: '/upload', headers: { Authorization: 'Bearer xxx', }, params: { user_id: 123, }, chunkSize: 1024 * 1024, maxFileSize: 1024 * 1024 * 10, concurrent: 2, accept: 'image/*,application/pdf', } }, methods: { beforeUpload(file) { console.log('beforeUpload:', file) // 可以在这里进行文件校验,例如文件类型、大小等 return true }, onProgress(progress) { console.log('onProgress:', progress) }, onSuccess(response) { console.log('onSuccess:', response) }, onError(error) { console.log('onError:', error) }, onComplete(response) { console.log('onComplete:', response) }, onAbort() { console.log('onAbort') }, }, } </script> ``` 4. 在 Vue.js 组件中可以调用 vue-simple-uploader 组件的方法来上传文件,例如: ```javascript this.$refs.uploader.upload() ``` 这样就可以实现文件上传了。需要注意的是,上传文件的具体实现需要后端 API 的支持,需要在后端编写相应的文件上传接口。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

LLL_LH

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

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

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

打赏作者

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

抵扣说明:

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

余额充值