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文件上传的代码怎么写”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。