elementUi上传图片

element上传图片

 <div>
     <!-- :headers='{token:token}' -->
      <el-upload class="upload-demo fl" 
                :action="uploadUrl" accept="jpg jpeg、png、gif" 
                :before-upload="beforeUpload" :on-success="uploadSuccess" :on-change="change" :on-remove="remove"
                :name="name"
                :file-list="fileList" :limit="1">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      </el-upload>
  </div>

js

<script>
export default {
  data() {
    return {
      uploadUrl: "ulr/img",
      fileList: [],
      uploadFile:'',
      name:'multipartFile'
    };
  },
  methods: {
   

    // 上传成功
    uploadSuccess(response, file, fileList) {
      //上传图片成功的回调
      console.log(response);
      let arr = [];
      // fileList.forEach(item => {
      //   let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      //   arr.push(item.response.url);
      // });
      this.uploadFile = arr.join(",");
      this.fileList = fileList;
      // if (fileList.length == 3) {
      //   document.getElementsByClassName("el-upload")[0].style.display = "none";
      // }
    },
    change(files, fileList) {
      //修改图片列表的回调
    },
    beforeUpload(file) {
      for (let i = 0; i < this.fileList.length; i++) {
        if (file.name == this.fileList[i].name) {
          this.$message.error("不能上传相同的文件!");
          return false;
        }
      }
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isJPG = testmsg === "jpg";
      const isjpeg = testmsg === "jpeg";
      const ispng = testmsg === "png";
      const isgif = testmsg === "gif";
      const iszip = testmsg === "zip";
      const isLt5M = file.size / 1024 / 1024 < 5;
      const isLt20M = file.size / 1024 / 1024 < 20;
      if (!isJPG && !isjpeg && !ispng && !isgif && !iszip) {
        this.$message.error("上传未见只能是 jpg、jpeg、png、gif，zip 格式!");
        return false;
      }
      // if (isJPG && !isLt5M) {
      //   this.$message.error("上传图片jpg大小不能超过 5MB!");
      // }
      // if (isjpeg && !isLt5M) {
      //   this.$message.error("上传图片jpeg大小不能超过 5MB!");
      // }
      // if (ispng && !isLt5M) {
      //   this.$message.error("上传图片png大小不能超过 5MB!");
      // }
      // if (isgif && !isLt5M) {
      //   this.$message.error("上传图片gif大小不能超过 5MB!");
      // }
      // if (iszip && !isLt20M) {
      //   this.$message.error("上传压缩文件大小不能超过 20MB!");
      // }
    },
    remove(file, fileList) {
      //删除图片的回调
      let arr = [];
      // fileList.forEach(item => {
      //   arr.push(item.response.url);
      // });
      this.fileList = fileList;
      this.uploadFile = arr.join(",");

      // if (fileList.length == 3) {
      //   document.getElementsByClassName("el-upload")[0].style.display = "none";
      // } else {
      //   document.getElementsByClassName("el-upload")[0].style.display =
      //     "inline-block";
      // }
    }
  }
};
</script>

不建议参考 不是那么完善