elementUI文件上传

最新推荐文章于 2023-11-24 11:37:09 发布

&nesp; 

最新推荐文章于 2023-11-24 11:37:09 发布

阅读量147

点赞数

文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_40895465/article/details/108976313

版权

<el-upload
            class="upload-demo"
            action
            :limit="1"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :http-request="fileUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              支持格式：DOC、DOCX、PDF、JPG、PNG，最大支持2MB
            </div>
          </el-upload>

导入请求文件

import { uploadFile, joinSign } from "@/api/api.js";

   beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    fileUpload(file) {
      let form = new FormData();
      form.append("file", file.file);
      // 接口文件  
      // 参考 https://blog.youkuaiyun.com/qq_40895465/article/details/108976327
      uploadFile(form).then(({msg, data: {url}}) => {
        console.log(url);
        this.url = url;
        this.$message({
            message: msg,
            type: "success",
          });
      });
    },