快捷導(dǎo)航

VUE+element-ui文件上傳的示例代碼

更新時間：2022年03月04日 08:36:56 作者：QLUGCL

圖片和文件上傳在很多項目中都可以使用的到，本文主要介紹了VUE+element-ui文件上傳的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

圖片上傳（ImageCropper）

此前端代碼自己封裝了文件上傳，只需要配置后端接口需求URL以及對應(yīng)的圖片上傳成功后的處理函數(shù)，后端返回OSS生成的圖片訪問地址，然后cropsuccess函數(shù)將上傳成功的圖像進(jìn)行顯示。

    <template>
    <div class="app-container">
    <!-- 講師頭像 -->
    <el-form-item label="講師頭像">
    <!-- 頭銜縮略圖 -->
    <pan-thumb :image="teacher.avatar"/>
    <!-- 文件上傳按鈕 -->
    <el-button type="primary" icon="el-icon-upload"
    @click="imagecropperShow=true">更換頭像
    </el-button>
    <!--
    v-show：是否顯示上傳組件
    :key：類似于id，如果一個頁面多個圖片上傳控件，可以做區(qū)分
    :url：后臺上傳的url地址
    @close：關(guān)閉上傳組件
    @crop-upload-success：上傳成功后的回調(diào) 
    field就是起name作用，值要與后端接口的參數(shù)一致
    -->
    <image-cropper
    v-show="imagecropperShow"
    :width="300"
    :height="300"
    :key="imagecropperKey"
    :url="BASE_API+'/eduoss/fileoss'"
    field="file"
    @close="close"
    @crop-upload-success="cropSuccess"/>
    </el-form-item>
        </div>
    </template>

<script>
  //引入調(diào)用API層:teacher.js文件
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

  export default{
 components: { ImageCropper, PanThumb },
      data() {
          return{
            teacher:{},
            saveBtnDisabled:false, // 保存按鈕是否禁用
            imagecropperKey:0,//上傳組件key值
            imagecropperShow:false,
            BASE_API:process.env.BASE_API, //獲取dev.env.js里面地址
            saveBtnDisabled:false  // 保存按鈕是否禁用,
          } 
      },
      methods: {
        close() { //關(guān)閉上傳彈框的方法
        this.imagecropperShow=false
        //上傳組件初始化：防止不能連續(xù)上傳修改頭像
        this.imagecropperKey = this.imagecropperKey+1
    },
    //上傳成功后的方法
    cropSuccess(data) {
      this.imagecropperShow=false
      //上傳之后，后端接口返回數(shù)據(jù)（url）類似response
      this.teacher.avatar = data.url
      //上傳組件初始化
        this.imagecropperKey = this.imagecropperKey+1
     
    },
      }
  }
  </script>

在這里插入圖片描述

請?zhí)砑訄D片描述

文件上傳（el-upload）

<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="信息描述">
        <el-tag type="info">excel模版說明</el-tag>
        <el-tag>
          <i class="el-icon-download"/>
          <a :href="'/static/01.xlsx'">點(diǎn)擊下載模版</a>
        </el-tag>

      </el-form-item>

      <el-form-item label="選擇Excel">
        <el-upload
          ref="upload"
          :auto-upload="false"
          :on-success="fileUploadSuccess"
          :on-error="fileUploadError"
          :disabled="importBtnDisabled"
          :limit="1"
          :action="BASE_API+'/eduservice/subject/addSubject'"
          name="file"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
          <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
          <el-button
            :loading="loading"
            style="margin-left: 10px;"
            size="small"
            type="success"
            @click="submitUpload">上傳到服務(wù)器</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
    data() {
        return {
            BASE_API: process.env.BASE_API, // 接口API地址
            importBtnDisabled: false, // 按鈕是否禁用,
            loading: false
        }
    },
    created() {

    },
    methods:{
        //點(diǎn)擊按鈕上傳文件到接口里面
        submitUpload() {
            this.importBtnDisabled = true
            this.loading = true
            // js: document.getElementById("upload").submit()
            this.$refs.upload.submit()
        },
        //上傳成功
        fileUploadSuccess(response) {
            //提示信息
            this.loading = false
            this.$message({
                type: 'success',
                message: '添加課程分類成功'
            })
            //跳轉(zhuǎn)課程分類列表
            //路由跳轉(zhuǎn)
            this.$router.push({path:'/subject/list'})
        },
        //上傳失敗
        fileUploadError() {
            this.loading = false
            this.$message({
                type: 'error',
                message: '添加課程分類失敗'
            })
        }
    }
}
</script>

在這里插入圖片描述