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

网络编程 2021-07-04 15:02www.168986.cn编程入门

Vue是一套构建用户界面的框架，开发只需要关注视图层，它不仅易于上手，还便于与第三方库或既有项目的整合。这篇文章主要介绍了vue中使用elementUI组件手动上传图片,需要的朋友可以参考下

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"
            aept=".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)
          }
        });
    }

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

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

以上所述是长沙网络推广给大家介绍的vue中使用elementUI组件手动上传图片功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
如果你觉得本文对你有帮助，欢迎网络推广网站推广转载，烦请注明出处，谢谢！

上一篇：微信小程序 SOTER 生物认证DEMO 指纹识别功能下一篇：vue项目中使用eslint+prettier规范与检查代码的方法

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设