团队作业(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>