|
|
@@ -1,163 +1,248 @@
|
|
|
<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 class="content-title">支持拖拽</div>
|
|
|
- <!--<div class="plugins-tips">
|
|
|
- Element UI自带上传组件。
|
|
|
- 访问地址：
|
|
|
- <a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
|
|
|
- </div>-->
|
|
|
- <el-upload class="upload-demo" drag action=""
|
|
|
- accept=".jpg,.png,.csv"
|
|
|
- :limit="10"
|
|
|
- :on-exceed="handleExceed"
|
|
|
- :on-remove="handleRemove"
|
|
|
- :before-remove="beforeRemove"
|
|
|
- :auto-upload="false" multiple>
|
|
|
- <i class="el-icon-upload"></i>
|
|
|
- <div class="el-upload__text">
|
|
|
- 将文件拖到此处，或
|
|
|
- <em>点击上传</em>
|
|
|
- </div>
|
|
|
- <template #tip>
|
|
|
- <div class="el-upload__tip">请上传jpg/png图像文件或csv结构化文件，且不超过 500kb,一次最多上传10个文件</div>
|
|
|
- </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">
|
|
|
+ <template #append>.csv</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="上传文件">
|
|
|
+ <!-- accept接收文件类型,auto-upload:false 关闭自动上传,drag 允许拖动，name=file,上传文件的字段名 -->
|
|
|
+ <!-- file-list:接收文件上传的数组,before-upload:配合accept属性,检查文件类型、后缀,before-remove：删除提醒 -->
|
|
|
+ <!-- on-change:获取文件，将文件保存在fileList里;limit:最多上传文件数 -->
|
|
|
+ <el-upload
|
|
|
+ ref="uploadRef"
|
|
|
+ accept='text/csv'
|
|
|
+ :auto-upload=false
|
|
|
+ drag
|
|
|
+ name="file"
|
|
|
+ :file-list="fileList"
|
|
|
+ :before-upload="beforeUploadFile"
|
|
|
+ :before-remove="beforeRemoveFile"
|
|
|
+ :on-change="getFile"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :limit="1"
|
|
|
+ style="width: 500px;"
|
|
|
+ >
|
|
|
</el-upload>
|
|
|
- <!--<div class="content-title">支持裁剪</div>
|
|
|
- <div class="plugins-tips">
|
|
|
- vue-cropperjs：一个封装了 cropperjs 的 Vue 组件。
|
|
|
- 访问地址：
|
|
|
- <a href="https://github.com/Agontuk/vue-cropperjs" target="_blank">vue-cropperjs</a>
|
|
|
- </div>-->
|
|
|
- </div>
|
|
|
+
|
|
|
+ <span slot="tip">{{message}}</span>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 操作： -->
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="submitForm(formRef,uploadRef)"
|
|
|
+ >
|
|
|
+ 立即创建
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ @click="resetForm(formRef,uploadRef)"
|
|
|
+ >
|
|
|
+ 重置
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { ref } from "vue";
|
|
|
-import VueCropper from "vue-cropperjs";
|
|
|
-import "cropperjs/dist/cropper.css";
|
|
|
-import defaultSrc from "../../assets/img/img.jpg";
|
|
|
+import { reactive, ref } from 'vue'
|
|
|
import { ElMessage, ElMessageBox } from "element-plus"
|
|
|
+import {UploadFile} from "../../api/file";
|
|
|
|
|
|
export default {
|
|
|
- name: "upload",
|
|
|
- components: {
|
|
|
- VueCropper,
|
|
|
- },
|
|
|
- setup() {
|
|
|
- const imgSrc = ref("");
|
|
|
- const cropImg = ref(defaultSrc);
|
|
|
- const dialogVisible = ref(false);
|
|
|
- const cropper = ref(null);
|
|
|
-
|
|
|
- const setImage = (e) => {
|
|
|
- const file = e.target.files[0];
|
|
|
- if (!file.type.includes("image/")) {
|
|
|
- return;
|
|
|
+ name: "Upload",
|
|
|
+ setup() {
|
|
|
+ //表单，不要和ref重名
|
|
|
+ const form= reactive({
|
|
|
+ fileName: '',
|
|
|
+ });
|
|
|
+ //DOM元素
|
|
|
+ const formRef=ref('formRef');
|
|
|
+ const uploadRef=ref('upload');
|
|
|
+ const message= '请上传csv格式的文件';
|
|
|
+ //文件列表
|
|
|
+ let fileList= [];
|
|
|
+ //用于放数据 FormData类型
|
|
|
+ let formData= new FormData();
|
|
|
+
|
|
|
+ //校验规则
|
|
|
+ const rules = reactive({
|
|
|
+ fileName:
|
|
|
+ [
|
|
|
+ {
|
|
|
+ max:64,
|
|
|
+ message: '文件名最多64个字符!',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // required:true,
|
|
|
+ // message: '必须填写文件名!',
|
|
|
+ // trigger: 'blur',
|
|
|
+ // }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+
|
|
|
+ //————————————————————————————————方法区——————————————————————————————————————————————
|
|
|
+
|
|
|
+ //文件上传后，保存在数组fileList里
|
|
|
+ function getFile(file, files) {
|
|
|
+ fileList = files;
|
|
|
+ }
|
|
|
+
|
|
|
+ //提交表单
|
|
|
+ const submitForm = async (formEl,uploadEl) => {
|
|
|
+ if (!formEl || !uploadEl) return
|
|
|
+ await formEl.validate((valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ if (fileList.length <= 0) {
|
|
|
+ ElMessage.error("请先上传1个文件！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ //将表单内其他内容添加进formData
|
|
|
+ formData.append('fileName', form.fileName+'.csv')
|
|
|
+ formData.append('file', fileList[0].raw);
|
|
|
+ formData.append('userId', "1")
|
|
|
+
|
|
|
+ //调用接口，提交即可
|
|
|
+ ElMessage.success('文件名校验成功!')
|
|
|
+ UploadFile(formData).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ fileList=[]
|
|
|
+ formEl.resetFields()
|
|
|
+ uploadEl.clearFiles()
|
|
|
+
|
|
|
+ if (res.status === 200)
|
|
|
+ {
|
|
|
+ ElMessageBox({
|
|
|
+ title: '文件上传',
|
|
|
+ message: `文件: ${form.fileName}上传成功`,
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ beforeClose: (action, instance, done) => {
|
|
|
+ if (action === 'confirm') {
|
|
|
+ instance.confirmButtonLoading = true
|
|
|
+ instance.confirmButtonText = 'Loading...'
|
|
|
+ setTimeout(() => {
|
|
|
+ done()
|
|
|
+ setTimeout(() => {
|
|
|
+ instance.confirmButtonLoading = false
|
|
|
+ }, 125)
|
|
|
+ }, 125)
|
|
|
+ } else {
|
|
|
+ done()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
}
|
|
|
- const reader = new FileReader();
|
|
|
- reader.onload = (event) => {
|
|
|
- dialogVisible.value = true;
|
|
|
- imgSrc.value = event.target.result;
|
|
|
- cropper.value && cropper.value.replace(event.target.result);
|
|
|
- };
|
|
|
- reader.readAsDataURL(file);
|
|
|
- };
|
|
|
- const cropImage = () => {
|
|
|
- cropImg.value = cropper.value.getCroppedCanvas().toDataURL();
|
|
|
- };
|
|
|
- const cancelCrop = () => {
|
|
|
- dialogVisible.value = false;
|
|
|
- cropImg.value = defaultSrc;
|
|
|
- };
|
|
|
-
|
|
|
- //todo:
|
|
|
- const handleExceed=(files,fileList)=>{
|
|
|
- console.log("handleExceed")
|
|
|
- console.log(files)
|
|
|
- console.log(fileList)
|
|
|
- ElMessage.warning(
|
|
|
- `一次最多上传10个文件, 你一次上传了${files.length}个文件`
|
|
|
- )
|
|
|
+ else
|
|
|
+ {
|
|
|
+ ElMessage.error("上传失败!失败码:"+res.status);
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- const handleRemove=(file,fileList)=>{
|
|
|
- console.log("handleRemove")
|
|
|
- console.log(file)
|
|
|
- console.log(fileList)
|
|
|
+ else {
|
|
|
+ ElMessage.error('校验失败!')
|
|
|
+ console.log(fields)
|
|
|
}
|
|
|
- const beforeRemove = (file, filelist) => {
|
|
|
- return ElMessageBox.confirm(
|
|
|
- `取消上传${file.name} ?`
|
|
|
- ).then(
|
|
|
- () => true,
|
|
|
- () => false
|
|
|
- )
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ //重置表单
|
|
|
+ function resetForm(formEl,uploadEl){
|
|
|
+ fileList=[]
|
|
|
+ if (!formEl || !uploadEl) return
|
|
|
+ formEl.resetFields()
|
|
|
+ uploadEl.clearFiles()
|
|
|
+ }
|
|
|
+
|
|
|
+ //判断后缀是否符合要去
|
|
|
+ function isFileExtensionRight(extension){
|
|
|
+ return extension === 'csv' || extension === 'sas';
|
|
|
+ }
|
|
|
+
|
|
|
+ //上传前,配合accept属性,检查文件类型、后缀
|
|
|
+ function beforeUploadFile(file) {
|
|
|
+ let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
|
|
|
+ if (isFileExtensionRight(extension)) {
|
|
|
+ ElMessage.warning('文件类型不对,目前只接受csv类型的文件'); //控制文件类型
|
|
|
+ return false
|
|
|
}
|
|
|
- return {
|
|
|
- cropper,
|
|
|
- imgSrc,
|
|
|
- cropImg,
|
|
|
- dialogVisible,
|
|
|
- setImage,
|
|
|
- cropImage,
|
|
|
- cancelCrop,
|
|
|
- handleExceed,
|
|
|
- handleRemove,
|
|
|
- beforeRemove
|
|
|
- };
|
|
|
- },
|
|
|
-};
|
|
|
+ }
|
|
|
+
|
|
|
+ //移除文件时的提醒
|
|
|
+ function beforeRemoveFile(file) {
|
|
|
+ let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
|
|
|
+ if (!isFileExtensionRight(extension)) return;
|
|
|
+
|
|
|
+ return ElMessageBox({
|
|
|
+ title: '移除待上传文件?',
|
|
|
+ message: `确定要删除文件: ${file.name} 吗?`,
|
|
|
+ showCancelButton: true,
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ beforeClose: (action, instance, done) => {
|
|
|
+ if (action === 'confirm') {
|
|
|
+ instance.confirmButtonLoading = true
|
|
|
+ instance.confirmButtonText = 'Loading...'
|
|
|
+ setTimeout(() => {
|
|
|
+ done()
|
|
|
+ setTimeout(() => {
|
|
|
+ instance.confirmButtonLoading = false
|
|
|
+ }, 125)
|
|
|
+ }, 125)
|
|
|
+ } else {
|
|
|
+ done()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ //超限制
|
|
|
+ function handleExceed(files, fileList) {
|
|
|
+ ElMessage.warning("目前只能上传一个包")
|
|
|
+ }
|
|
|
+
|
|
|
+ return{
|
|
|
+ form,
|
|
|
+ rules,
|
|
|
+ message,
|
|
|
+ fileList,
|
|
|
+ formRef,
|
|
|
+ uploadRef,
|
|
|
+ submitForm,
|
|
|
+ resetForm,
|
|
|
+ getFile,
|
|
|
+ beforeUploadFile,
|
|
|
+ beforeRemoveFile,
|
|
|
+ handleExceed,
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.content-title {
|
|
|
- font-weight: 400;
|
|
|
- line-height: 50px;
|
|
|
- margin: 10px 0;
|
|
|
- font-size: 22px;
|
|
|
- color: #1f2f3d;
|
|
|
-}
|
|
|
|
|
|
-.pre-img {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- background: #f8f8f8;
|
|
|
- border: 1px solid #eee;
|
|
|
- border-radius: 5px;
|
|
|
-}
|
|
|
-.crop-demo {
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
-}
|
|
|
-.crop-demo-btn {
|
|
|
- position: relative;
|
|
|
- width: 100px;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- padding: 0 20px;
|
|
|
- margin-left: 30px;
|
|
|
- background-color: #409eff;
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
- border-radius: 4px;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-.crop-input {
|
|
|
- position: absolute;
|
|
|
- width: 100px;
|
|
|
- height: 40px;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- opacity: 0;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-</style>
|
|
|
+</style>
|
10702