阅读 287

图片上传功能

最近公司项目项目需要,于是就写了一个图片上传,不难,写了一个vue的和jquery的,供大家参考,首先说下思路吧,首先获取图片,判断大小,然后上传服务器,将路径赋值给新的img,就这样ok,下面看代码吧,首先来jquery的 



<!-- 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() {      }};基本就是这样,很简单的,拿来即用,欢迎喜欢的前端的小伙伴一起交流,下次会写个多图上传的~

就这样,喜欢的点个❤️吧~


复制代码



关注下面的标签,发现更多相似文章
评论