闲碎记事本 闲碎记事本
首页
  • JAVA
  • Cloudflare
  • 学完再改一遍UI
友链
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

YAN

我要偷偷记录...
首页
  • JAVA
  • Cloudflare
  • 学完再改一遍UI
友链
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • python

  • vue

    • 开始vue
    • upload自定义文件上传
    • js
  • H5

  • C

  • 学习
  • vue
YAN
2024-06-02

upload自定义文件上传


<el-upload
        class="upload-box"
        action=""
        name="file"
        :limit="1"
        accept=".mp4,.h264"
        :show-file-list="true"
        :http-request="upload"
>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传mp4,h264文件</div>
</el-upload>


<script>
    
export default {
  name: "videoUpload",
  data() {
    return {
      form: {},
    };
  },
  methods: {
    upload(file) {
      console.log("选择文件")
      this.form.file = file.file;
    },
    onSubmit() {
        let formData = new FormData();
            Object.keys(this.form).forEach((key) => {
            formData.append(key, this.form[key])
        })
        this.$axios({
            method: 'post',
            data: formData,
            url: `api/load`,
        }).then((res) => {
            //成功
        }).catch((error) => {
            //失败
        });
    }
  }
};
</script>
上次更新: 2025/05/14, 01:34:05
开始vue
js

← 开始vue js→

最近更新
01
Caddy操作指南
04-25
02
Swap空间
04-22
03
Alist使用
04-21
更多文章>
Theme by Vdoing | Copyright © 2022-2025 YAN | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式