图片上传功能

<!-- html部分 -->

<!-- 图片上传组件 -->    <div class="upload">      <span class="upLoadImg">        <img          src="https://img.redbi.com/group1/M00/00/2E/rB92Flwre3GAKkg_AABRh_LaYVY763.jpg"          alt=""        />      </span>
      <input        type="file"        accept="image/*"        class="imgInput"        onchange="file(this)"      />    </div>//js部分
// 图片上传      function file(e) {        var file = e.files[0];        console.log(file, 9999);        var size = file.size;        var maxSize = 2 * 1024 * 1024;
        let formData = new FormData();        formData.append("file", file);
        console.log(formData, "lllll");        if (size > maxSize) {          console.log("图片过大，请重新上传");          return false;        } else {          console.log("success");          $.ajax({            url: "上传服务器地址",            type: "post",            contentType: false, //请求头，必须设置为false

            processData: false,//数据处理，设置为false            dataType: "json",            data: formData,            success: function(res) {              console.log(res.result[0].item.url, ";;;");
              let images = res.result[0].item.url;              var ur = '<img src="' + images + '"></img>';              $(".upLoadImg").html(ur);              // console.log(attr, "ppp");            }          });        }      }
//css部分


.upload {        position: relative;        height: 500px;        width: 500px;      }      .upload img {        width: 100%;        height: 100%;      }      .imgInput {        position: absolute;        height: 100%;        width: 100%;        top: 0;        left: 0;        opacity: 0;      }


ps：具体样式根据自己的图片大小去调整




接下来 来个vue的，就不放css了，样式自己随便控制(ps:其实是自己懒，哈哈，偷个懒)


//html 部分
<div class="downLoad">      <input        type="file"        class="fileType"        @change="file($event)"        accept="image/jpg, image/jpeg, image/png, image/PNG, image/gif"      >      <img alt="Vue logo" :src="img">    </div>
//js部分

export default {  name: "home",  data() {    return {            img: require("../static/images/logo.png")    };  },  components: {      },  methods: {    

    //图片上传组件    file(e) {      let file = e.target.files[0] || e.dataTransfer.files[0];      console.log(file, "909090");
      let maxSize = 3 * 1024 * 1024; //设置图片最大尺寸
      if (file > maxSize) {        alert("图片过大！");        // 将图片设置为原始图片        this.img = "/assets/login.png";
        return false;      }
      // 设置请求头      let config = {        headers: { "Content-Type": "multipart/form-data" }      };
      let formData = new FormData();      formData.append("file", file);      console.log(formData, ";;;;");      console.log(formData.get("file"), "00999");
      this.$axios.post("服务器地址", formData, config).then(res => {        console.log(res, ";;;");        let image = res.data.result[0].item.url;        this.img = image;
        console.log(this.img);      });    }  },  created() {      }};基本就是这样，很简单的，拿来即用，欢迎喜欢的前端的小伙伴一起交流，下次会写个多图上传的～

就这样，喜欢的点个❤️吧～