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组件手动上传图片功能,希望对大家有所帮助
下一篇: python中的3种定义类方法
推荐阅读