Bagaimana untuk menyedari bahawa muat naik fail vue tidak boleh lebih besar daripada 10mb

Cara melaksanakan muat naik fail Vue tidak boleh lebih besar daripada 10mb: 1. Cipta "index.vue" 2. Tetapkan struktur kepada ""; 3. Gunakan kod logik "methods: {beforeUpload(file) {...}" untuk menentukan saiz fail.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, versi vue3, komputer DELL G3

Bagaimana untuk menyedari bahawa muat naik fail vue tidak boleh lebih besar daripada 10mb?

In vue, komponen Muat Naik muat naik el-upload menggunakan format -zip, saiz tidak melebihi 10M & dapatkan dan simpan token di kedai

Kesan

Kod

index.vue

Struktur

 <el-form>
    <el-form-item>
        <el-upload>
            <el-button>上传</el-button>
            zip格式，大小不超过10M
        </el-upload>
    </el-form-item>
    <el-form-item>
        <el-button>立即添加</el-button>
        <el-button>取消</el-button>
    </el-form-item>
</el-form>

Logik

<script>import store from &#39;@/store/index&#39;;export default {
  data() {
    return {
      upload: {
        url: `${App.apiConfig.service}/dcp-manage/dcp/compile/manage/service/editor/version/upload`,
        header: {
          token: store.state.token        },
        resData: {}
      },
      form: {
        nameDesc: &#39;&#39;,
        age:&#39;&#39;
      },
      rules: {
        nameDesc: [
          { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; }
        ],          
        fileName: [
          { required: true, message: &#39;不能为空&#39;, trigger: &#39;blur&#39; }
        ]
      }        
    }
  },    
  methods: {
    beforeUpload(file) {
      const sizeLimit = file.size / 1024 / 1024 > 10
      if (sizeLimit) {
        this.$message.warning(&#39;上传文件大小不能超过 10MB!&#39;)
      }
      const fileFamart = file.name.split(&#39;.&#39;)[file.name.split(&#39;.&#39;).length - 1];
      if (fileFamart !== &#39;zip&#39;) {
        this.$message.warning(&#39;必须上传zip格式的文件!&#39;)
      }
      return !sizeLimit && fileFamart === &#39;zip&#39;
    },
    onSuccess(data) {
      this.form = {
        ...this.form,
        ...data.data  // 把上传文件添加到form中
      }
      this.$message.success(&#39;上传成功!&#39;);
    },
    onError() {
      this.$message.error(&#39;上传失败!&#39;);
    },
    // 立即添加
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {  // 校验form表单
        if (!valid) return false;

        ajax.post(&#39;cs_addVersion&#39;, this.form).then(res => {
          this.$message.success(&#39;新增成功!&#39;);
          this.backToList();  // 新增成功后返回
        }, err => {
          this.$message.error(&#39;新增失败!&#39;);
        });
      });
    },
    // 取消
    backToList() {
      this.$router.back();
    }      
  }}</script>

Storan

srcstoreindex.js

/*
 * @Descripttion:
 * @version:
 * @Author:
 * @Date: 2022-06-04 09:34:23
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-06-04 11:20:26
 */import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);// 状态const state = {
  token: sessionStorage.getItem('token'),
  userInfo: JSON.parse(sessionStorage.getItem('userInfo')),}// mutations用来操作stateconst mutations = {
  // 保存token
  SAVE_TOKEN (state, token) {
    sessionStorage.setItem('token', token);
    state.token = token;
  },
  // 保存用户相关信息
  SAVE_USERINFO (state, userInfo) {
    sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
    state.userInfo = userInfo;
  },}export default new Vuex.Store({
  state,
  mutations})

Pembelajaran yang disyorkan: "video vue tutorial》

Atas ialah kandungan terperinci Bagaimana untuk menyedari bahawa muat naik fail vue tidak boleh lebih besar daripada 10mb. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!