」;3、透過邏輯程式碼「methods: {beforeUpload(file) {...}」實現判斷檔案大小即可。"/> 」;3、透過邏輯程式碼「methods: {beforeUpload(file) {...}」實現判斷檔案大小即可。">
vue檔案上傳不能大於10mb的實作方法:1、建立「index.vue」;2、設定結構為「
」;3.透過邏輯程式碼「methods: {beforeUpload(file) {...}」實作判斷檔案大小即可。
本教學操作環境:Windows10系統、vue3版、DELL G3電腦
vue檔案上傳不能大於10mb怎麼實現?在
##效果
程式碼
<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 '@/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(); } }}</script>
儲存
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怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!