"; 3. Utilisez le code logique "methods: {beforeUpload(file) {...}" pour déterminer la taille du fichier."/> "; 3. Utilisez le code logique "methods: {beforeUpload(file) {...}" pour déterminer la taille du fichier.">
Maison > Article > interface Web > Comment réaliser que le téléchargement de fichiers vue ne peut pas dépasser 10 Mo
Le téléchargement de fichiers Vue ne peut pas dépasser 10 Mo. Méthode de mise en œuvre : 1. Créez "index.vue" 2. Définissez la structure sur "
"; 3. Utilisez le code logique "methods: {beforeUpload(file) {...}" pour déterminer la taille du fichier.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version vue3, ordinateur DELL G3
Comment implémenter que le téléchargement de fichiers vue ne peut pas dépasser 10 Mo ?
vue, le composant de téléchargement Upload el-upload utilise le format -zip, la taille ne dépasse pas 10M & stocke pour obtenir et enregistrer le token
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 '@/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>
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})apprentissage recommandé : "tutoriel vidéo vue"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!