vue文件上传不能大于10mb怎么实现
vue文件上传不能大于10mb怎么实现?
vue中,Upload上传组件el-upload的使用-zip格式,大小不超过10M & store中获取和保存token
效果
代码
index.vue
结构
<el-form :model="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})
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanffeag
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24