VUE+element-ui文件上傳的代碼怎么寫

這篇文章主要介紹了VUE+element-ui文件上傳的代碼怎么寫的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇VUE+element-ui文件上傳的代碼怎么寫文章都會有所收獲，下面我們一起來看看吧。

圖片上傳（ImageCropper）

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

    <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，如果一個頁面多個圖片上傳控件，可以做區分
    :url：后臺上傳的url地址
    @close：關閉上傳組件
    @crop-upload-success：上傳成功后的回調 
    field就是起name作用，值要與后端接口的參數一致
    -->
    <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>
  //引入調用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() { //關閉上傳彈框的方法
        this.imagecropperShow=false
        //上傳組件初始化：防止不能連續上傳修改頭像
        this.imagecropperKey = this.imagecropperKey+1
    },
    //上傳成功后的方法
    cropSuccess(data) {
      this.imagecropperShow=false
      //上傳之后，后端接口返回數據（url）類似response
      this.teacher.avatar = data.url
      //上傳組件初始化
        this.imagecropperKey = this.imagecropperKey+1
     
    },
      }
  }
  </script>

文件上傳（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'">點擊下載模版</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"
            
            size="small"
            type="success"
            @click="submitUpload">上傳到服務器</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:{
        //點擊按鈕上傳文件到接口里面
        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: '添加課程分類成功'
            })
            //跳轉課程分類列表
            //路由跳轉
            this.$router.push({path:'/subject/list'})
        },
        //上傳失敗
        fileUploadError() {
            this.loading = false
            this.$message({
                type: 'error',
                message: '添加課程分類失敗'
            })
        }
    }
}
</script>

注意

name屬性值要與后端接口參數MultipartFile的變量名一致，否則無法映射匹配傳值。
前端標識符屬性值和后端參數名稱（實體類中屬性名）保持一致，否則無法直接映射傳參，導致后端接收不到數據。

關于“VUE+element-ui文件上傳的代碼怎么寫”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“VUE+element-ui文件上傳的代碼怎么寫”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。