团队作业(5)
完成路由跳转,和上传页面
<template> <div> <!-- <el-upload class="upload-demo" ref="uploadFile" :action="-" :auto-upload="false" :limit="1" :on-change="onChangeFile" :on-remove="onRemoveFile"> <el-button size="small" type="primary">选择文件</el-button> </el-upload> <el-button type="primary" @click="submitUpload">上传文件</el-button> --> <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" accept="image/jpeg,image/gif,image/png" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList" > <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip"> 只能上传jpg/png文件,且不超过500kb </div> </el-upload> </div> </template> <script> // export default { // data() { // return { // userFile: null, // 上传的文件 // }; // }, // methods: { // //确认上传 // submitUpload() { // if (this.userFile == null) { // return this.$message.error("请先选取文件!"); // } // //文件上传添加上传参数(若无需添加参数则直接传this.userFile给接口) // const formdata = new FormData(); // formdata.append("file", this.userFile); // formdata.append("user", "张三"); // //传对象参数,需转成json字符串形式 // let tick = { // code: "fdgfhgghg", // uid: "4566895623", // }; // formdata.append("ssoTick", JSON.stringify(tick)); // //调用上传接口 // api.upload(formdata).then((res) => { // if (res.code == 200) { // this.$message.success("上传成功"); // } else { // this.$message.error(res.msg); // } // }); // }, // //文件上传改变 // onChangeFile(file, arr) { // //限制文件大小 // let isLt2M = file.raw.size / 1024 / 1024 < 2; // if (!isLt2M) { // this.$refs.uploadFile.clearFiles(); // return this.$message.error("上传文件大小不能超过 2MB!"); // } // this.userFile = file.raw; // }, // //文件移除 // onRemoveFile() { // this.userFile = null; // }, // }, // }; export default { data() { return { fileList: [ { name: "food.jpeg", url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100", }, { name: "food2.jpeg", url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100", }, ], }; }, methods: { handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { console.log(file); }, handleExceed(files, fileList) { this.$message.warning( `当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${ files.length + fileList.length } 个文件` ); }, beforeRemove(file, fileList) { return this.$confirm(`确定移除 ${file.name}?`); }, }, }; </script> <style> </style>