vue如何实现文件上传不可大于10mb

发布时间：2023-07-22 11:12:04 所属栏目：教程来源：网络

导读： 　　为大家详细介绍“vue如何实现文件上传不能大于10mb”，内容详细，步骤清晰，细节处理妥当，希望这篇“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

　　效果

　　vue如何实现文件上传不能大于10mb

　　代码

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

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!