vue如何實現文件上傳不能大于10mb

本文小編為大家詳細介紹“vue如何實現文件上傳不能大于10mb”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue如何實現文件上傳不能大于10mb”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

vue文件上傳不能大于10mb的實現方法：1、創建“index.vue”；2、設置結構為“<el-form :model="form" class="form" ref="ruleForm" :rules="rules" label-width="120px">”；3、通過邏輯代碼“methods: {beforeUpload(file) {...}”實現判斷文件大小即可。

vue中，Upload上傳組件el-upload的使用-zip格式，大小不超過10M & store中獲取和保存token

效果

代碼

index.vue

結構

 <el-form :model="form" class="form" ref="ruleForm" :rules="rules" label-width="120px">
    <el-form-item label="上傳程序包：" prop="fileName">
        <el-upload :action="upload.url" :on-success="onSuccess" :on-error="onError" :headers="upload.header" :beforeUpload="beforeUpload">
            <el-button type="mini">上傳</el-button>
            zip格式，大小不超過10M
        </el-upload>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="onSubmit">立即添加</el-button>
        <el-button @click="backToList">取消</el-button>
    </el-form-item>
</el-form>

邏輯

<script>import store from '@/store/index';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: '',
        age:''
      },
      rules: {
        nameDesc: [
          { required: true, message: '不能為空', trigger: 'blur' }
        ],          
        fileName: [
          { required: true, message: '不能為空', trigger: 'blur' }
        ]
      }        
    }
  },    
  methods: {
    beforeUpload(file) {
      const sizeLimit = file.size / 1024 / 1024 > 10
      if (sizeLimit) {
        this.$message.warning('上傳文件大小不能超過 10MB!')
      }
      const fileFamart = file.name.split('.')[file.name.split('.').length - 1];
      if (fileFamart !== 'zip') {
        this.$message.warning('必須上傳zip格式的文件!')
      }
      return !sizeLimit && fileFamart === 'zip'
    },
    onSuccess(data) {
      this.form = {
        ...this.form,
        ...data.data  // 把上傳文件添加到form中
      }
      this.$message.success('上傳成功!');
    },
    onError() {
      this.$message.error('上傳失敗!');
    },
    // 立即添加
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {  // 校驗form表單
        if (!valid) return false;

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

存儲

src\store\index.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})

讀到這里，這篇“vue如何實現文件上傳不能大于10mb”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。