|
|
@@ -0,0 +1,225 @@
|
|
|
+<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