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>
 

不建議參考 不是那麼完善