|
|
@@ -1,229 +0,0 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <div class="crumbs">
|
|
|
- <el-breadcrumb separator="/">
|
|
|
- <el-breadcrumb-item>
|
|
|
- <i class="el-icon-lx-calendar"></i> 表单
|
|
|
- </el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item>文件上传</el-breadcrumb-item>
|
|
|
- </el-breadcrumb>
|
|
|
- </div>
|
|
|
- <div class="container">
|
|
|
- <div>
|
|
|
- <el-form
|
|
|
- :model="form"
|
|
|
- :rules="rules"
|
|
|
- ref="formRef"
|
|
|
- label-width="120px"
|
|
|
- >
|
|
|
-
|
|
|
- <el-form-item label="文件名" prop="fileName" style="width: 400px;">
|
|
|
- <el-input placeholder="在此填写文件名" v-model="form.fileName"></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
-<!-- <el-form-item label="上传文件">-->
|
|
|
-<!-- <el-upload ref="upload"-->
|
|
|
-<!-- class="upload-demo"-->
|
|
|
-<!-- name="file"-->
|
|
|
-<!-- accept="'text/csv','application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"-->
|
|
|
-<!-- drag=true-->
|
|
|
-<!-- :headers="headers"-->
|
|
|
-<!-- :http-request="httpRequest"-->
|
|
|
-<!-- :before-remove="beforeRemove"-->
|
|
|
-<!-- :before-upload="beforeUploadFile"-->
|
|
|
-<!-- :on-exceed="handleExceed"-->
|
|
|
-<!-- :limit="1"-->
|
|
|
-<!-- :auto-upload="false"-->
|
|
|
-<!-- :on-change="getFile"-->
|
|
|
-<!-- :data="form"-->
|
|
|
-<!-- :file-list="fileList"-->
|
|
|
-<!-- style="width: 500px;">-->
|
|
|
-<!-- </el-upload>-->
|
|
|
-<!-- <span slot="tip">{{message}}</span>-->
|
|
|
-<!-- </el-form-item>-->
|
|
|
-
|
|
|
- <el-form-item>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- @click="submitForm(formRef)"
|
|
|
- v-loading.fullscreen.lock="fullscreenLoading"
|
|
|
- >
|
|
|
- 立即创建
|
|
|
- </el-button>
|
|
|
-
|
|
|
- <el-button
|
|
|
- @click="resetForm(formRef)"
|
|
|
- >
|
|
|
- 重置
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts">
|
|
|
-import { reactive, ref } from 'vue'
|
|
|
-import { ElMessage, ElMessageBox } from "element-plus"
|
|
|
-
|
|
|
-export default {
|
|
|
- name: "upload2",
|
|
|
- components: {
|
|
|
- },
|
|
|
- setup() {
|
|
|
- const fullscreenLoading=ref(false);
|
|
|
- //表单，不要和ref重名
|
|
|
- const form= reactive({
|
|
|
- fileName: '',
|
|
|
- })
|
|
|
- //html元素
|
|
|
- const formRef=ref('formRef')
|
|
|
- //上传
|
|
|
- const headers={
|
|
|
- "content-type": "multipart/form-data"
|
|
|
- };
|
|
|
- const message= '请上传csv/xlsx/xls格式的文件';
|
|
|
- //文件列表
|
|
|
- let fileList= []
|
|
|
- //用于放数据 FormData类型
|
|
|
- let formData= {}
|
|
|
-
|
|
|
- //校验规则
|
|
|
- const rules = reactive({
|
|
|
- fileName:
|
|
|
- [
|
|
|
- {
|
|
|
- max:64,
|
|
|
- message: '文件名最多64个字符!',
|
|
|
- trigger: 'blur',
|
|
|
- },
|
|
|
- {
|
|
|
- required:true,
|
|
|
- message: '必须填写文件名!',
|
|
|
- trigger: 'blur',
|
|
|
- }
|
|
|
- ]
|
|
|
- })
|
|
|
-
|
|
|
- //上传
|
|
|
- function getFile(file, fieList) {
|
|
|
- this.fileList = fieList;
|
|
|
- // FormData 对象
|
|
|
- this.formData = new FormData()
|
|
|
- }
|
|
|
-
|
|
|
- //上传前
|
|
|
- function beforeUploadFile(file) {
|
|
|
- let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
|
|
|
- console.log(extension);
|
|
|
- if (extension !== 'apk') {
|
|
|
- // ElMessage.warning('只能上传后缀是.zip/.rar/.apk的文件'); //控制文件类型
|
|
|
- ElMessage.warning('文件类型不对'); //控制文件类型
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- //超限制
|
|
|
- function handleExceed(files, fileList) {
|
|
|
- ElMessage.warning("目前只能上传一个包")
|
|
|
- }
|
|
|
-
|
|
|
- //移除
|
|
|
- function beforeRemove(file, fileList) {
|
|
|
- let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
|
|
|
- if (extension !== 'apk') {
|
|
|
- return
|
|
|
- }
|
|
|
- return this.$confirm(`确定移除 ${file.name}？`)
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- function httpRequest(param) {
|
|
|
- const fileObj = param.file // 相当于input里取得的files
|
|
|
- this.formData.append('apk', fileObj) // 文件对象
|
|
|
- console.log("文件包" + this.formData.get('apk'));
|
|
|
- }
|
|
|
-
|
|
|
- //提交
|
|
|
- const submitForm = async (formEl) => {
|
|
|
- if (!formEl) return
|
|
|
- await formEl.validate((valid, fields) => {
|
|
|
- if (valid)
|
|
|
- {
|
|
|
- console.log('submit!')
|
|
|
- }
|
|
|
-
|
|
|
- else
|
|
|
- {
|
|
|
- console.log('error submit!', fields)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- // form.validate((valid) => {
|
|
|
- // if (valid) {
|
|
|
- // if (this.fileList.length <= 0) {
|
|
|
- // ElMessage.error("至少上传一个包！");
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // this.$refs.upload.submit();
|
|
|
- // //换行自动添加为<br/>
|
|
|
- // //将表单内其他内容添加进formData
|
|
|
- // this.formData.append('version', this.form.version)
|
|
|
- // this.formData.append('type', "0")
|
|
|
- // this.fullscreenLoading = true;
|
|
|
- // //调用后端接口，提交即可
|
|
|
- // UploadFile(this.formData).then(res => {
|
|
|
- // console.log(res)
|
|
|
- // if (res.status === 200) {
|
|
|
- // this.fullscreenLoading = false;
|
|
|
- // ElMessage({
|
|
|
- // message: '上传成功',
|
|
|
- // type: 'success'
|
|
|
- // });
|
|
|
- // this.formData = {}
|
|
|
- // this.fileList = []
|
|
|
- // resetForm(form)
|
|
|
- // } else {
|
|
|
- // ElMessage.error("上传失败");
|
|
|
- // }
|
|
|
- // })
|
|
|
- // } else {
|
|
|
- // // console.log('error submit!!');
|
|
|
- // return false;
|
|
|
- // }
|
|
|
- // });
|
|
|
-
|
|
|
- //重置
|
|
|
- const resetForm = (formEl) => {
|
|
|
- if (!formEl) return
|
|
|
- formEl.resetFields()
|
|
|
- }
|
|
|
-
|
|
|
- return{
|
|
|
- form,
|
|
|
- rules,
|
|
|
- headers,
|
|
|
- message,
|
|
|
- httpRequest,
|
|
|
- beforeRemove,
|
|
|
- beforeUploadFile,
|
|
|
- handleExceed,
|
|
|
- getFile,
|
|
|
- fileList,
|
|
|
- submitForm,
|
|
|
- resetForm,
|
|
|
- fullscreenLoading,
|
|
|
- }
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.row-flex{
|
|
|
- display:flex;
|
|
|
- flex-direction:row;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-</style>
|
10702