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

发布时间:2023-01-30 14:26:20 作者:iii
来源:亿速云 阅读:178

本文小编为大家详细介绍“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})

读到这里,这篇“vue如何实现文件上传不能大于10mb”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. vue中template的使用方法有哪些
  2. Vue·如何使用v-viewer实现图片预览功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:vue单选选不上如何解决

下一篇:es6中filter过滤器怎么使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》