欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue中使用elementUI组件手动上传图片功能

程序员文章站 2024-01-08 17:02:22
vue框架简介 vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合。是基于mvvm(model-view-viewmodel)...

vue框架简介

vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合。是基于mvvm(model-view-viewmodel)设计思想。提供mvvm数据双向绑定的库,专注于ui层面

使用elementui上传图片时遇到跨域问题,所以需要自己写一个手动上传图片的方法

代码:

html

  <el-upload
            class="upload-demo"
            ref="upload"//绑定ref 清空时会用到
            :limit="1" //最多可上传1张
            :http-request="imguploadsectionfile" //上传方法
            :with-credentials="true"
            :auto-upload="true"
            accept=".png,.jpg,.gif,.svg"//上传文件的后缀名
            action=""//文件上传地址 我用的手动上传所以为空
            list-type="list"
            :file-list="filelist">
             <el-button slot="trigger" type="primary">选取图片</el-button>
           </el-upload>

method

 imguploadsectionfile(param){//图片上传
      let formdata = new formdata();//formdata格式
        formdata.append('img', param.file);
        request.post("url", formdata).then(res => {
          if (res.code == 200){//成功
            console.log(res)
          }
        });
    }

我做的是 后台返回上传的图片字符串地址 然后我加到对象中点击总按钮时再发送到后台 所以添加结束之后需要加下面这行代码

this.$refs.upload.clearfiles();//清空

总结

以上所述是小编给大家介绍的vue中使用elementui组件手动上传图片功能,希望对大家有所帮助