upload 自定义图片上传

最新推荐文章于 2024-08-02 17:54:22 发布

前端知识

最新推荐文章于 2024-08-02 17:54:22 发布

阅读量662

点赞数

分类专栏：工作中的问题文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_71902265/article/details/126258448

版权

工作中的问题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<template>
  <el-upload
    class="avatar-uploader"
    action="#"
    :http-request="uploadImage"
    accept=".png"
    :show-file-list="false"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      SystemUrl: "https://jsonplaceholder.typicode.com/posts/", //上传链接
      imageUrl: "",
    };
  },
  methods: {
    // 自定义上传方法
    uploadImage(file) {
      var formData = new FormData();
      formData.append("file", file.file);
      var requestConfig = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios.post(this.SystemUrl, formData, requestConfig).then((res) => {
        if (res.data.id == 101) {
          console.log("上传成功");
          this.imageUrl = "https://s1.328888.xyz/2022/08/10/4TKMp.png";
        } else {
          console.log("上传失败");
        }
      });
    },
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>