vue如何實現上傳圖片組件

這篇文章給大家分享的是有關vue如何實現上傳圖片組件的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

未上傳狀態

上傳狀態

其他狀態(查看/刪除)

自定義組件文件名稱 - 這里叫UploadImg.vue

<template>
  <div>
    <el-form>
      <!-- :on-change="uploadFile" -->
      <el-upload
        :limit="limit"   //最大允許上傳個數
        action
        accept="image/*" //接受上傳的
        :on-change="uploadFile" //文件狀態改變時的函數
        list-type="picture-card" //文件列表的類型
        :auto-upload="false" //是否在選取文件后立即進行上傳
        :file-list="fileList" //虛擬文件數組
        :on-exceed="handleExceed" //文件超出個數限制時的函數
        :on-preview="handlePictureCardPreview" //點擊文件列表中已上傳的文件時的函數
        :on-remove="handleRemove" //文件列表移除文件時的函數
        ref="upload"
        class="avatar-uploader"
        :class="{hide:showUpload}" //用來隱藏到達limit最大值之后 關閉上傳按鈕
        :disabled="disabled" //為查看不能上傳進行處理
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      //查看圖片
      <el-dialog width="30%" :visible.sync="dialogVisible">
        <img width="100%" :src="imgUrl.url" alt />
      </el-dialog>
      //如果不是需要直接上傳的,而是需要按鈕點擊再進行圖片上傳請打開此方法
      //上面的el-upload標簽里on-change換成http-request方法
      <!-- <Button text="上 傳" type="add_u"  @click.native="submitUpload"></Button> -->
    </el-form>
  </div>
</template>

<script>
//引入上傳圖片接口
import { uploadImg } from "@/api/public/api";
export default {
  props: {
    limit: Number,
    fileList: Array,
    disabled: Boolean,
  },
  data() {
    return {
      showUpload: false, //控制limit最大值之后 關閉上傳按鈕
      dialogVisible: false, //查看圖片彈出框
      imgUrl: [], //上傳圖片后地址合集
    };
  },
  //監聽上傳圖片的數組(為了處理修改時,自動渲染問題,和上傳按鈕消失問題);
  watch: {
    fileList(newName, oldName) {
      if (newName.length == this.limit) this.showUpload = true;
      else this.showUpload = false;
    },
  },
  methods: {
    //文件列表移除文件時的函數
    handleRemove(file, fileList) {
      const index = this.fileList.findIndex((item) => item === file.uid);
      this.imgUrl.splice(index, 1);
      this.$emit("delUrl", this.imgUrl);
      if (fileList.length < this.limit) this.showUpload = false;
    },
    //點擊文件列表中已上傳的文件時的函數
    handlePictureCardPreview(file) {
      this.imgUrl.url = file.url;
      this.dialogVisible = true;
    },
    //這里是不需要直接上傳而是通過按鈕上傳的方法
    submitUpload() {
      this.$refs.upload.submit();
    },
    //文件狀態改變時的函數(主要邏輯函數)
    uploadFile(e, fileList) {
      //判斷用戶上傳最大數量限制,來讓上傳按鈕消失
      if (fileList.length >= this.limit) this.showUpload = true;
      // const file = e.file; <- 這里是不需要直接上傳而是通過按鈕上傳的
      const file = e.raw; // <- 這里是直接上傳的
      //大小
      const size = file.size / 1024 / 1024 / 2;
      if (
        !(
          file.type === "image/png" ||
          file.type === "image/gif" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg"
        )
      ) {
        this.$notify.warning({
          title: "警告",
          message:
            "請上傳格式為image/png, image/gif, image/jpg, image/jpeg的圖片",
        });
      } else if (size > 2) {
        this.$notify.warning({
          title: "警告",
          message: "圖片大小必須小于2M",
        });
      } else {
        if (this.limit == 1) this.imgUrl = []; //此處判斷為一張的時候需要清空數組
        const params = new FormData();
        params.append("source", file);
        uploadImg(params).then((res) => {
        //這里返回的數據結構(根據自己返回結構進行修改)
          if (res.data.status === 1) {
            this.$message.success("上傳成功");
            this.imgUrl = res.data;
            //調用父組件的方法來傳遞圖片參數
            this.$emit("getUrl", this.imgUrl);
          } else this.$message.error("上傳失敗");
        });
      }
    },
    //文件超出個數限制時的函數
    handleExceed(files, fileList) {
      this.$message.info(`最多只允許上傳${this.limit}張圖片`);
    },
  },
};
</script>

//這里修改上傳前后的樣式(我覺得el-upload不好看 也可以自行修改)
<style  scope>
.hide .el-upload--picture-card {
  display: none !important;
}
.avatar-uploader > .el-upload {
  width: 200px;
  height: 200px;
  line-height: 200px;
  border-radius: 0px;
  background: #fff;
  border: 1px dashed #ccc;
}
.avatar-uploader > .el-upload > i {
  font-size: 28px;
  color: #ccc;
}
.avatar-uploader > .el-upload-list {
  display: block;
}
.avatar-uploader > .el-upload-list > .el-upload-list__item {
  width: 200px;
  height: 200px;
  display: block;
}
.avatar-uploader > .el-upload-list > .el-upload-list__item > img {
  width: 200px;
  height: 200px;
  border-radius: 0px;
}
</style>

在頁面中使用 - (因為我這邊用的地方比較多,我就寫全局了,你們可以根據自身項目來決定)

main.js

//圖片上傳組件
import UploadImg from "@/views/common/UploadImg.vue";
Vue.component('UploadImg', UploadImg)

demo.vue

<el-form-item label="上傳圖片">
 //limit 最大上傳幾張圖片  //fileList 圖片數組   //getUrl 獲取上傳后地址 //delUrl 刪除上傳后地址  // disabled 禁用處理
  <UploadImg :limit="1" :file-list="fileList" @getUrl="getUrl($event,'自己需要攜帶的參數')" @delUrl="delUrl($event,'自己需要攜帶的參數')" :disabled="true" />
</el-form-item>

//變量聲明
data:{
 fileList:[]
 }
//函數
getUrl(getUrl){
 console.log(getUrl)
 };
delUrl(getUrl){
console.log(getUrl)
};

感謝各位的閱讀！關于“vue如何實現上傳圖片組件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！