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"
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 (de == 200){//成功
svg图片怎么使用
console.log(res)
}
});
}
我做的是后台返回上传的图⽚字符串地址然后我加到对象中点击总按钮时再发送到后台所以添加结束之后需要加下⾯这⾏代码
this.$refs.upload.clearFiles();//清空
总结
以上所述是⼩编给⼤家介绍的vue中使⽤elementUI组件⼿动上传图⽚功能，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。