vue如何使用element實現上傳圖片和修改圖片功能

Vue如何使用Element實現上傳圖片和修改圖片功能

在現代Web開發中，圖片上傳和修改功能是非常常見的需求。Vue.js流行的前端框架，結合Element UI組件庫，可以非常方便地實現這些功能。本文將詳細介紹如何使用Vue和Element UI實現圖片上傳和修改功能，并提供一個完整的示例。

1. 環境準備

在開始之前，確保你已經安裝了Vue.js和Element UI。如果還沒有安裝，可以通過以下命令進行安裝：

# 使用Vue CLI創建項目
vue create my-project

# 進入項目目錄
cd my-project

# 安裝Element UI
npm install element-ui --save

安裝完成后，在main.js中引入Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. 圖片上傳功能

2.1 基本實現

Element UI提供了一個el-upload組件，可以方便地實現圖片上傳功能。以下是一個簡單的圖片上傳示例：

<template>
  <div>
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :limit="1"
      :file-list="fileList"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
    },
  },
};
</script>

2.2 上傳前的校驗

在實際應用中，我們通常需要對上傳的圖片進行一些校驗，例如文件類型、文件大小等?？梢酝ㄟ^before-upload鉤子來實現：

<template>
  <div>
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :limit="1"
      :file-list="fileList"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上傳圖片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上傳圖片大小不能超過 2MB!');
      }
      return (isJPG || isPNG) && isLt2M;
    },
  },
};
</script>

2.3 自定義上傳行為

有時候我們需要自定義上傳行為，例如使用axios進行上傳?？梢酝ㄟ^http-request屬性來實現：

<template>
  <div>
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :http-request="customUpload"
      :limit="1"
      :file-list="fileList"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上傳圖片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上傳圖片大小不能超過 2MB!');
      }
      return (isJPG || isPNG) && isLt2M;
    },
    customUpload(file) {
      const formData = new FormData();
      formData.append('file', file.file);

      axios.post('https://your-upload-url.com/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }).then(response => {
        this.fileList.push({
          name: file.file.name,
          url: response.data.url,
        });
      }).catch(error => {
        console.error('上傳失敗', error);
      });
    },
  },
};
</script>

3. 圖片修改功能

3.1 基本實現

圖片修改功能通常包括重新上傳圖片或對已上傳的圖片進行裁剪、旋轉等操作。以下是一個簡單的圖片修改示例：

<template>
  <div>
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :limit="1"
      :file-list="fileList"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <el-button type="primary" @click="handleEdit">修改圖片</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上傳圖片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上傳圖片大小不能超過 2MB!');
      }
      return (isJPG || isPNG) && isLt2M;
    },
    handleEdit() {
      if (this.fileList.length > 0) {
        this.dialogImageUrl = this.fileList[0].url;
        this.dialogVisible = true;
      } else {
        this.$message.warning('請先上傳圖片');
      }
    },
  },
};
</script>

3.2 圖片裁剪功能

為了實現圖片裁剪功能，可以使用第三方庫如cropperjs。以下是一個簡單的圖片裁剪示例：

<template>
  <div>
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :limit="1"
      :file-list="fileList"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img ref="image" :src="dialogImageUrl" alt="" />
      <el-button type="primary" @click="cropImage">裁剪圖片</el-button>
    </el-dialog>
  </div>
</template>

<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  data() {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      cropper: null,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.cropper = new Cropper(this.$refs.image, {
          aspectRatio: 1,
          viewMode: 1,
        });
      });
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上傳圖片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上傳圖片大小不能超過 2MB!');
      }
      return (isJPG || isPNG) && isLt2M;
    },
    cropImage() {
      const croppedCanvas = this.cropper.getCroppedCanvas();
      croppedCanvas.toBlob(blob => {
        const file = new File([blob], 'cropped-image.png', { type: 'image/png' });
        this.fileList = [{ name: file.name, url: URL.createObjectURL(file) }];
        this.dialogVisible = false;
      });
    },
  },
};
</script>

4. 總結

通過Vue和Element UI，我們可以非常方便地實現圖片上傳和修改功能。本文詳細介紹了如何使用el-upload組件實現圖片上傳、上傳前的校驗、自定義上傳行為，以及如何實現圖片修改和裁剪功能。希望本文能幫助你在實際項目中更好地實現這些功能。

如果你有任何問題或建議，歡迎在評論區留言討論。