TA的每日心情 | 无聊 2019-4-21 13:02 |
---|
签到天数: 3 天 [LV.2]圆转纯熟
|
需求:
1、文件大小验证
2、文件类型验证
3、额外参数传输- <template>
- <el-upload class="upload-demo" action :limit="1" :file-list="formFileList" :http-request="handleUploadForm" :on-exceed="formHandleExceed" :on-remove="formHandleRemove"
- :before-upload="beforeUploadForm" accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
- <el-button type="primary">上传文件</el-button>
- <span slot="tip" class="el-upload__tip" style="margin: 0 10px;">只能上传xlsx/xls/csv文件,且不超过{{formMaxSize}}M</span>
- </el-upload>
- </template>
- <script>
- export default {
- data () {
- return {
- formMaxSize: 10, // 上传文件大小
- formFileList: [], // 显示上传文件
- uploadFormFileList: [] // 确定上传文件
- }
- },
- methods: {
- // 开始上传前验证
- beforeUploadForm (file) {
- // 验证文件大小
- if (file.size / 1024 / 1024 > this.formMaxSize) {
- this.$message({
- message: `上传文件大小不能超过${this.formMaxSize}M!`,
- type: 'warning'
- })
- return false
- }
- // 中文乱码处理
- if (file.raw) {
- let reader = new FileReader() // 读取文件内容
- reader.readAsText(file.raw, 'gb2312') // 防止中文乱码问题,不加reader.onload方法都不会触发
- reader.onload = function (e) {
- this.contentHtml = e.target.result // txt文本内容,接下来就可以对其进行校验处理了
- }
- }
- // 验证文件类型
- var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
- const extension = testmsg === 'xlsx' || testmsg === 'xls' || testmsg === 'csv'
- if (!extension) {
- this.$message({
- message: '上传文件只能是xlsx/xls/csv格式!',
- type: 'warning'
- })
- }
- return extension
- },
- // 移除上传列表中文件
- formHandleRemove (file, formFileList) {
- let thiz = this
- for (let i = 0; i < thiz.uploadFormFileList.length; i++) {
- if (thiz.uploadFormFileList[i].pname === file.name) {
- thiz.uploadFormFileList.splice(i, 1)
- break
- }
- }
- },
- // 允许上传文件个数验证
- formHandleExceed (files, formFileList) {
- this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + formFileList.length} 个文件`)
- },
- // 上传文件
- handleUploadForm (param) {
- let thiz = this
- let formData = new FormData()
- formData.append('uid', '上传文件编号') // 额外参数
- formData.append('files', param.file)
- let loading = thiz.$loading({
- lock: true,
- text: '上传中,请稍候...',
- spinner: 'el-icon-loading',
- background: 'rgba(0, 0, 0, 0.7)'
- })
- thiz.$axios.post('http://localhost:8080/upload/file', formData).then(({data}) => {
- if (data.statusCode === 233) {
- thiz.$message('上传文件成功,' + data.message)
- thiz.formFileList = []
- thiz.uploadFormFileList = []
- } else {
- thiz.formFileList = []
- thiz.uploadFormFileList = []
- thiz.$message('上传文件失败,' + data.message)
- }
- loading.close()
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
复制代码 总结:
关于el-upload中各属性的配置,可以看element_ui官网
后端接受上传文件和额外参数:
@RequestParam(value = "uid") String uid, @RequestParam(value = "files") MultipartFile[] files
补充知识:vue利用elementUI上传文件以及其他参数的处理方式
将文件自动上传改为false
:auto-upload="false"
点击保存的时候,调用el-upload的上传方法
代码如下(封装的上传方法)- export function mpp(data) {
- return new Promise(function(resolve, reject) {
- let data = {
- method: "POST",
- url:url,
- data:data
- }
- resolve(axios(data));
- })
- }
- <template>
复制代码- <!--导入计划 -->
- <div class="associationPlan">
- <el-form :model="dataModel" :rules="rules" ref="associationPlan" label-width="100px">
- <el-form-item label="项目名称:" prop="projectArry">
- <el-cascader :options="listOrgInfoList" v-model="dataModel.projectArry" :props="defaultProp" size="small" placeholder="请选择项目" style="width:100%;" clearable :disabled="isCompany"></el-cascader>
- </el-form-item>
- <el-form-item label="计划级别:" prop="level">
- <el-select size="small" v-model="dataModel.level" placeholder="请选择:" clearable style="width:100%;">
- <el-option v-for="(item,index) in planTypeList" :label="item.name" :value="item.number" :key="index"></el-option>
- </el-select>
- <span class="warnInfo" v-if="dataModel.level==1">一级进度计划匹配项目总工期,项目下只可建立一个,请确认后再添加!</span>
- </el-form-item>
- <el-form-item label="计划名称:" prop="name">
- <el-input v-model.number="dataModel.name" size="small"></el-input>
- </el-form-item>
- <el-form-item label="导入计划:">
- <el-upload accept=".mpp" style="display:inline-block;vertical-align: top;" ref="uploadAdd" action="" :auto-upload="false" :http-request="uploadImg" :on-success="uploadImgSuccess" :on-remove="handleRemove">
- <el-button size="small" type="success">请选择文件</el-button>
- </el-upload>
- </el-form-item>
- </el-form>
- <div class="clickBtn">
- <el-button @click="close" size="small">取消</el-button>
- <el-button @click="commit" size="small" type="primary">保存</el-button>
- </div>
- </div>
- </template>
复制代码- <script>
- import { mapState, mapActions } from 'vuex';
- import { plan,mpp} from "../api/system_interface.js";
- export default {
- name: "associationPlan",
- data() {
- return {
- dataModel: {
- projectId: '',
- projectArry:[],
- level:null,
- name:'',
- parentId:'0'
- },
- defaultProp: {
- children: "child",
- label: "name",
- value: "id"
- },
- //数据校验
- rules: {
- projectArry: [{ required: true, message: "请选择项目", trigger: "blur" }],
- name: [{ required: true, message: "请输入计划名称", trigger: "blur" }],
- level: [{ required: true, message: "请选择计划级别", trigger: "change" }]
- },
- file:false,
- isCompany:false
- };
- },
- computed: {
- ...mapState([
- 'listOrgInfoList',
- 'planTypeList'
- ]),
- },
- methods: {
- ...mapActions([
- 'getlistOrgInfoList'
- ]),
- update(){
- let companyTypes = sessionStorage.getItem("companyType");
- this.isCompany = companyTypes == 4?true:false;
- this.dataModel.projectArry = JSON.parse(sessionStorage.getItem("selectArry"));
- },
- uploadImg (f) {
- // if(!f){
- // this.$message.error("请上传文件!");
- // return
- // }
- this.dataModel.projectId = this.dataModel.projectArry[this.dataModel.projectArry.length - 1];
- let param = new FormData(); //创建form对象
- param.append('file',f.file);//通过append向form对象添加数据
- param.append('level',this.dataModel.level);//添加form表单中其他数据
- param.append('projectId',this.dataModel.projectId);//添加form表单中其他数据
- param.append('planName',this.dataModel.name);//添加form表单中其他数据
- mpp(param)//上传
- .then(response=>{
- if(response.code == "200"){
- this.$message.success("上传成功!");
- this.close();
- this.$emit("refreshData");
- onSuccess(response.data);
- }
- })
- .catch(({err}) => {
- f.onError()
- })
- },
- uploadImgSuccess(response, file, fileList) {
- // 缓存接口调用所需的文件路径
- console.log('文件上传成功')
- // this.$message.success("上传成功!");
- },
- handleRemove(file, fileList) {
- // 更新缓存文件
- console.log('文件删除')
- },
- //重置方法
- reset() {
- const associationPlan = this.$refs["associationPlan"];
- associationPlan.resetFields();
- this.dataModel.projectId = null;
- this.dataModel.name = '';
- this.dataModel.level = '';
- this.dataModel.projectArry = [];
- },
- //关闭弹框
- close() {
- this.$emit("close");
- this.reset();
- },
- //点击提交
- commit() {
- this.$refs["associationPlan"].validate(valid => {
- if (!valid) {
- return;
- }
- this.$refs.uploadAdd.submit();
- // this.dataModel.projectId = this.dataModel.projectArry[this.dataModel.projectArry.length - 1];
- // plan(this.dataModel)
- // .then(response => {
- // if (response.code == "200") {
- // this.$message.success("添加成功!");
- // this.close();
- // this.$emit("refreshData");
- // } else {
- // this.$message.error(response.msg);
- // }
- // })
- // .catch(error => {
- // });
- });
- },
- }
- };
复制代码- </script>
- <style lang="scss" scoped>
- .clickBtn {
- text-align: center;
- }
- .warnInfo{
- // color: #feba51;
- color: rgb(64, 158, 255);
- }
- </style>
复制代码 以上这篇vue+element_ui上传文件,并传递额外参数操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持咔叽论坛。
原文地址:https://www.jb51.net/article/201467.htm |
|