vue文件上传不能大于10mb怎么实现

前端技术 2024/03/18 Vue

vue文件上传不能大于10mb的实现方法：1、创建“index.vue”；2、设置结构为“”；3、通过逻辑代码“methods: {beforeupload(file) {...}”实现判断文件大小即可。

vue文件上传不能大于10mb怎么实现

本教程操作环境：Windows10系统、vue3版、DELL G3电脑

vue文件上传不能大于10mb怎么实现？

vue中，Upload上传组件el-upload的使用-zip格式，大小不超过10M & store中获取和保存token

效果

42ed33742b1269e3eb5bf2a00bb17fc.jpg

代码

index.vue

结构
 <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>
逻辑
<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>
存储

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})
推荐学习：《》   

以上就是vue文件上传不能大于10mb怎么实现的详细内容，更多请关注本站点其它相关文章！

本文地址：https://www.stayed.cn/item/27040

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案