技術標籤：vuejsvueelementui

vue+elementui上傳檔案

1.上傳檔案程式碼以及解釋

<!--上傳檔案模板 -->
<template>
  <!--action：必傳引數，上傳的地址，型別為String 
  headers：設定上傳頭部，型別為Object,一般為 Authorization: 'Bearer ' + Cookie.get('token'), 型別object
  multiple: 是否支援多選檔案，true可以選多個，false只能選一個 型別boolean
  data：上傳時的額外引數 型別object
  name: 上傳的檔案欄位名字 型別string
  with-credentials: 支援傳送 cookie 憑證資訊,預設為true， 型別boolean
  show-file-list: 是否顯示已上傳檔案列表,預設為true 型別boolean
  drag: 是否啟用拖拽上傳，預設為false             型別 boolean
  accept: 接收上傳的檔案型別，限制上傳的檔案格式，before-upload可以達到同樣的效果 型別string
  on-preview：點選檔案列表中已上傳的檔案時的鉤子,就是點選已經上傳檔案列表觸發的函式，比如點選已經上傳的圖片可以進行放大和刪除 型別function(file)
  on-remove: 檔案移除時的鉤子，相當於我把檔案點叉了，觸發的函式 型別function(file, fileList)
  on-success：檔案上傳成功時的鉤子，比如可以彈出上傳成功，在一些檔案列表新增中也可以做一些處理 型別function(response, file, fileList)
  on-error：檔案上傳失敗出發的鉤子 型別function(err, file, fileList)
  on-progress： 檔案上傳時的鉤子，可以理解為檔案上傳觸發的函式 型別function(event, file, fileList)
  on-change: 檔案狀態改變時的鉤子，新增檔案、上傳成功和上傳失敗時都會被呼叫 型別function(file, fileList)
  before-upload: 上傳檔案之前的鉤子，引數為上傳的檔案，若返回 false 或者返回 Promise 且被 reject，則停止上傳,同accept，可以做一些檔案上傳的限制，比如字尾名是不是為png/jpg之類的 型別 function(file)
  before-remove：刪除檔案之前的鉤子，引數為上傳的檔案和檔案列表，若返回 false 或者返回 Promise 且被 reject，則停止刪除，優先順序在on-remove之前 function(file, fileList)
  list-type:檔案列表上傳的型別，比如我型別為picture-card或者text，可選列表text/picture/picture-card，預設為text 型別string
  auto-upload: 是否在選取檔案後立即進行上傳，預設為true 型別boolean
  file-list: 上傳的檔案列表，預設為[] 陣列形式  型別：array
  http-request 覆蓋預設的上傳行為，可以自定義上傳的實現,一些特殊需求可以用到 型別function
  disabled: 是否禁用 預設為flase 型別boolean
  limit: 最大允許上傳個數 number型別 	型別number
  on-exceed：檔案超出個數限制時的鉤子 型別function(files, fileList)
  -->
  <div>
    <el-upload
      :action="action"
      :headers="headers"
      :multiple="multiple"
      :data="parameterData"
      name="file"
      with-credentials="ture"
      show-file-list="true"
      drag="false"
      :accept="accept"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleFileRemove"
      :on-success="handleFileSuccess"
      :on-error="handleUploadError"
      :on-progress="handleFileUploadProgress"
      :on-change="handleFileUploadChange"
      :before-upload="beforeAvatarUpload"
      :before-remove="beforeRemoveUpload"
      list-type="text"
      auto-upload="true"
      :file-list="fileList"
      :http-request="httpRequestUpload"
      :disabled="isUploading"
      :limit="limit"
      :on-exceed="onExceedUpload"
      ref="upload"
    >
      <!--簡介式上傳檔案 -->
      <el-button size="small" icon="el-icon-upload2">點選上傳檔案</el-button>
      <!--上傳圖片 -->
      <!-- <i class="el-icon-plus"></i> -->
      <!--solt     
          trigger	觸發檔案選擇框的內容,需要時候使用
          tip	提示說明文字，用的較多，在solt標籤中寫出提示的文字即可
      -->
      <div style="color: #999999; font-size: 12px; margin-top: 4px;" slot="tip">
        <slot>
          <!-- 提示的文字 -->
        </slot>
      </div>
    </el-upload>
    <!--圖片放大的dialog -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
export default {
  props: {
    action: '/upload',
    multiple: false,
    files: {
      type: Array,
      default: () => [],
    },
    accept: {
      type: String,
      default: '',
    },
    limit: {
      type: Number,
      default: 2,
    },
    parameterData: '',
  },
  data: function () {
    return {
      dialogImageUrl: '',
      fileList: [],
      /**
       * 設定上傳的請求頭部
       */
      headers: {
        Authorization: 'Bearer ' + Cookie.get('token'),
      },
      /**
       * 是否禁用上傳
       */
      isUploading: false,
    }
  },
  watch: {
    files: {
      handler(value) {
        this.fileList = value
      },
      immediate: true,
    },
  },
  methods: {
    /**
     * 點選檔案列表中已上傳的檔案時的鉤子
     */
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    /**
     * 檔案移除時觸發的函式
     */
    handleFileRemove(file, fileList) {
      this.handleEmitFilesChange(fileList)
    },
    /**
     * 檔案上傳成功出發的函式
     */
    handleFileSuccess(response, file, fileList) {
      this.isUploading = false
      // this.msgSuccess("上傳成功");
      // this.$alert(response.msg, '匯入結果', { dangerouslyUseHTMLString: true })
      this.handleEmitFilesChange(fileList)
    },
    /**
     * 檔案上傳失敗觸發的函式
     */
    handleUploadError() {
      this.$message({
        type: 'error',
        message: '上傳失敗',
      })
      this.loading.close()
    },
    /**
     * 檔案上傳時觸發的函式
     */
    handleFileUploadProgress(event, file, fileList) {
      this.isUploading = true
    },

    /**
     * 檔案狀態改變時觸發的函式
     */
    handleFileUploadChange(file, fileList) {},
    // 限制圖片上傳大小
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上傳圖片大小不能超過 2MB!')
        return false
      }

      // 判斷圖片型別來篩選圖片格式上傳
      let _type = file.type
      if (
        _type.indexOf('png') == -1 &&
        _type.indexOf('jpg') == -1 &&
        _type.indexOf('jpeg') == -1
      ) {
        this.$message.error('上傳圖片格式不正確，請重新上傳!')
        return false
      }
      return
    },
    /**
     * 刪除檔案時觸發的函式，若返回 false 或者返回 Promise 且被 reject,停止刪除
     */
    beforeRemoveUpload(file, fileList) {},
    /**
     * 覆蓋預設的上傳行為，可以自定義上傳的實現
     */
    httpRequestUpload() {
      console.log('覆蓋上傳')
    },
    /**
     * 檔案超出個數限制時觸發的函式
     */
    onExceedUpload(files, fileList) {
      this.$alert('檔案數量超出限制', '上傳結果', {
        dangerouslyUseHTMLString: true,
      })
    },

    handleEmitFilesChange(fileList = []) {
      const files = fileList.map((i) => i.response.fileName)
      this.$emit('file-list-change', { files })
    },
    /**
     clearFiles	清空已上傳的檔案列表（該方法不支援在 before-upload 中呼叫）	— 比如點選重新上傳的時候
      abort	取消上傳請求	（ file: fileList 中的 file 物件 ）
      submit	手動上傳檔案列表
     */
    _clearFiles() {
      this.$refs.upload.clearFiles()
    },
    _submit() {
      this.$refs.upload.submit()
    },
  },
}
</script>

 

2.使用方式

import upload from ‘@/components/xx-upload’

components: {upload },

// 限制檔案數limit

<upload :limit=“1” v-model="欄位名字“>

官網網址：https://element.eleme.cn/#/zh-CN/component/layout

如果你喜歡的話，可以關注一下博主的個人網站哦
https://riverwang.com
微信小程式