vue 2.0+element ui 使用el-upload图片上传-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 2.0+element ui 使用el-upload图片上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

el-upload标签上传图片

vue2elementui upload如何使用,程序员,vue,vue.js,ui,前端,vue

有两种方式：
1、上传图片到服务器上，在数据库中存一个url；（以后迁环境的时候，必须将指定的文件夹一起迁移，比较繁琐
2、将图片转为base64形势存放到数据库中；（较低一点很方便）

两者在前端img标签中使用src，都可将图片展示出

下面介绍的是第二种方法

**
使用el-upload将图片加载成Base64格式，通过form统一上传给后端

1、创建通用component ImgComponent.vue

<template>

  <el-upload class="upload-demo" action="" ref="upload" list-type="picture-card" :auto-upload="false"
    :on-change="changeUpload" accept="image/jpeg,image/gif,image/png,image/bmp">
    <i slot="default" class="el-icon-plus"></i>
  </el-upload>
</template>
<script>
export default {
  name: "regShopImg",
  data() {
    return {
      imageUrl: "",
      imgthing: {},
    };
  },
  props: ["imgN", "nameN"],
  methods: {
    changeUpload(file, fileList) {
      console.log(file);
      console.log("2:", fileList);
      // 判断图片大小
      if (fileList[0].size < 1100000) {
        // 判断图片格式是否为jpg,png,jepg,gif
        var fileName = fileList[0].name;
        // var suffixIndex=fileName.lastIndexOf(".")
        // var suffix=fileName.substring(suffixIndex+1).toUpperCase()
        var suffix = fileName
          .substring(fileName.lastIndexOf(".") + 1)
          .toUpperCase();
        if (
          suffix == "BMP" ||
          suffix == "JPG" ||
          suffix == "JPEG" ||
          suffix == "PNG" ||
          suffix == "GIF" ||
          suffix == "png" ||
          suffix == "jpeg"
        ) {
          this.fileList = fileList;
          this.$nextTick(() => {
            var i = this.imgN;
            let uploadLists = document.getElementsByClassName("el-upload-list");
            let uploadListsN = uploadLists[i];
            let uploadListLi = uploadListsN.children;
            uploadListsN.setAttribute(
              "style",
              "position: absolute;height: 160px;margin-top: 0;margin-left: 0px;width: 260px;overflow: hidden"
            );
            let liA = uploadListLi[0];
            // 试着获取bolb里面的数据------------S
            //获取图片的Blob值
            function getImageBlob(url, cb) {
              var xhr = new XMLHttpRequest();
              xhr.open("get", url, true);
              xhr.responseType = "blob";
              xhr.onload = function () {
                if (this.status == 200) {
                  if (cb) cb(this.response);
                }
              };
              xhr.send();
            }
            function preView(url) {
              let reader = new FileReader();
              getImageBlob(url, function (blob) {
                reader.readAsDataURL(blob);
              });
              reader.onload = function (e) {
                // 获取bolb里面数据时,生成预览
                var img = document.createElement("img");
                //console.log("e.target.result:", e.target.result);
                img.src = e.target.result;
                // 获取bolb里面数据时,生成预览
                let imgElement = document.createElement("img");
                console.log('fileList[0].url:', fileList[0].url);
                imgElement.setAttribute("src", fileList[0].url);
                imgElement.setAttribute(
                  "style",
                  "max-width:100%;padding-left:0"
                );
                if (liA.lastElementChild.nodeName !== "IMG") {
                  liA.appendChild(imgElement);
                }
                // 把base64的信息放到imgthing的file里
                file.base64 = e.target.result;
              };
            }
            preView(fileList[0].url);
          // 修改nameN名字对应的数据,在一个页面使用多个不同字段图片上传，为了复用组件
          if (this.nameN === "hsptLogoImg") {
            this.imgthing.hsptLogoImg = file;
          }
          if (this.nameN === "userHead") {
            this.imgthing.userHead = file;
          }
          // console.log("this.imgthing:", this.imgthing);
          this.$emit("imgthing", this.imgthing);
        } else {
          this.$message.error("文件类型不正确,请重新上传！");
        }
      } else {
        this.$message.error("图片大小超过1M,请重新上传");
      }
    },
  },
};
</script>
 
<style scoped lang="scss">
// 上传
.upload-demo {
  width: 260px;
  height: 160px;

  .upload_btn {
    width: 260px;
    height: 160px;
    background: #f2f2f2;
  }

  .el-upload__tip {
    margin: 0;
    float: left;
  }
}
</style>

2、在父组件中使用

<ImgComp :imgN='0' :nameN='hsptLogoImg' @imgthing='imgthing' v-model="formItem.hsptLogoImg"></ImgComp>

import ImgComp from '@/components/ImgComponent.vue'

//在method中添加方法，目的是上传到插件上，将图片展示出来
methods: {
imgthing(imgthing) {
			//console.log('imgthing:',imgthing);
			// 合并对象
			this.Imgthing = Object.assign(this.Imgthing, imgthing)
			// 填充到ruleForm对应项,用来判断是否有数据
			this.formItem.hsptLogoImg = this.Imgthing.hsptLogoImg
			this.formItem.userHead = this.Imgthing.userHead
		},
}