element UI 图片上传/文件上传

<template>
<el-upload
  name="promoPic"
  class="avatar-uploader"
  :action="actionurl"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>

<script>
export default {
    data() {
        return{
            actionurl:'https://jsonplaceholder.typicode.com/posts/' //post地址
        }
    },
    methods: {
        beforeAvatarUpload(file){},
        handleAvatarSuccess(response, file){
            this.imageUrl = URL.createObjectURL(file.raw) //展示图
        }
    }
}
</script>

2、文件上传

<template>
  <el-upload
     class="upload-demo"
     ref="upload"
     action="#"
     :multiple="false"
     accept=".excel, .xlsx, .xls, .xlsm, .csv"
     :auto-upload="false"
     :on-change="uploadFile"
     :show-file-list="false"
     >
     <el-button type="primary" size="small">选择文件</el-button>
  </el-upload>

<el-button type="primary" @click="importFile" size="small">确 定</el-button>
</template>

<script>
export default {
    data() {
        return{
            inputFile: '',
            formData: new FormData(),
            errorFileName: ''
        }
    },
    methods: {
        // 文件上传
        uploadFile(item) {
            console.log('item.raw', item.raw)
            // let formData = new FormData()
            this.formData = new FormData()
            let file = item.raw
            this.formData.append('File', file)
            this.inputFile = item.raw.name
            this.errorFileName = ''
        },
        importFile() {
            if (!this.inputFile) {
                this.$message.warning('请先选择需要导入的文件')
                return
            }
            const config = {
                headers: { 'Content-Type': 'multipart/form-data;charset=utf-8' }
            }
            this.$http
                .post('/share/import', this.formData, config)
                .then((res) => {
                    console.log('res--:', res)
                    if (res.data.data.err_file) {
                        this.errorFileName = res.data.data.err_file
                    } else {
                        this.$message.success('导入成功')
                        this.dialogVisible = false
                        this.getShareList()
                    }
                })
                .catch((err) => {
                    console.log(err, 'err')
                })
        }
    }
}
</script>