el-upload 上傳文件和上傳圖片的基本用法

el-upload 上傳excel

<template>
  <el-form :model="form">
    <el-form-item label="上傳文件" :label-width="formLabelWidth">
      <el-upload ref="uploadExcel" action="https://jsonplaceholder.typicode.com/posts/" :limit=limitNum :auto-upload="false" accept=".xlsx" :before-upload="beforeUploadFile" :on-change="fileChange" :on-exceed="exceedFile" :on-success="handleSuccess" :on-error="handleError" :file-list="fileList">
        <el-button size="small" plain>選擇文件</el-button>
        <div slot="tip" class="el-upload__tip">只能上傳xlsx(Excel2007)文件，且不超過10M</div>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button size="small" type="primary" @click="uploadFile">當即上傳</el-button>
      <el-button size="small">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script> import axios from 'axios' export default { data() { return { limitNum: 1, formLabelWidth: '80px', form: { file: '' }, fileList: [] } }, methods: { // 文件超出個數限制時的鉤子
 exceedFile(files, fileList) { this.$notify.warning({ title: '警告', message: `只能選擇 ${this.limitNum} 個文件，當前共選擇了 ${files.length + fileList.length} 個` }); }, // 文件狀態改變時的鉤子
 fileChange(file, fileList) { console.log('change') console.log(file) this.form.file = file.raw console.log(this.form.file) console.log(fileList) }, // 上傳文件以前的鉤子, 參數爲上傳的文件,若返回 false 或者返回 Promise 且被 reject，則中止上傳
 beforeUploadFile(file) { console.log('before upload') console.log(file) let extension = file.name.substring(file.name.lastIndexOf('.')+1) let size = file.size / 1024 / 1024
      if(extension !== 'xlsx') { this.$notify.warning({ title: '警告', message: `只能上傳Excel2017（即後綴是.xlsx）的文件` }); } if(size > 10) { this.$notify.warning({ title: '警告', message: `文件大小不得超過10M` }); } }, // 文件上傳成功時的鉤子
 handleSuccess(res, file, fileList) { this.$notify.success({ title: '成功', message: `文件上傳成功` }); }, // 文件上傳失敗時的鉤子
 handleError(err, file, fileList) { this.$notify.error({ title: '錯誤', message: `文件上傳失敗` }); }, uploadFile() { this.$refs.uploadExcel.submit() /* let formData = new FormData() formData.append('file', this.form.file) axios.post('https://jsonplaceholder.typicode.com/posts/', formData, { "Content-Type": "multipart/form-data" } ) .then(res => { console.log('res') console.log(res) }) .catch(err => { }) */ } } } </script>

<style lang="scss" scoped>

</style>

 

el-upload 上傳圖片

<template>
  <el-form :model="form">
    <el-form-item label="上傳圖片" :label-width="formLabelWidth">
      <el-upload ref="upload" action="#" accept="image/png,image/gif,image/jpg,image/jpeg" list-type="picture-card" :limit=limitNum :auto-upload="false" :on-exceed="handleExceed" :before-upload="handleBeforeUpload" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-form-item>
    <el-form-item>
      <el-button size="small" type="primary" @click="uploadFile">當即上傳</el-button>
      <el-button size="small">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script> export default { data() { return{ dialogImageUrl: '', dialogVisible: false, formLabelWidth: '80px', limitNum: 3, form: {} } }, methods: { // 上傳文件以前的鉤子
 handleBeforeUpload(file){ console.log('before') 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的圖片' }) } let size = file.size / 1024 / 1024 / 2
      if(size > 2) { this.$notify.warning({ title: '警告', message: '圖片大小必須小於2M' }) } }, // 文件超出個數限制時的鉤子
 handleExceed(files, fileList) { }, // 文件列表移除文件時的鉤子
 handleRemove(file, fileList) { console.log(file, fileList); }, // 點擊文件列表中已上傳的文件時的鉤子
 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, uploadFile() { this.$refs.upload.submit() } } } </script>

<style lang="scss" scoped>

</style>